[feature] Implement for graph, geoMap and indoorMap

Author: dee077

README.md

@@ -335,6 +335,23 @@ 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).
 
+- `hashParams`
+
+  Configuration for adding hash parameters to the URL when a node is clicked.
+
+  ```JS
+      hashParams:{
+        show: boolean,
+        type: 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`**
+
 - `onInit`
 
   The callback function executed on initialization of `NetJSONGraph` instance.

public/example_templates/netjsongraph.html

@@ -67,6 +67,10 @@
       // `graph` render defaultly.
       // We can add data gradually by array.
       const graph = new NetJSONGraph("../assets/data/netjsonmap.json", {
+        hashParams: {
+          show: true,
+          type: "basicUsage",
+        },
         linkCategories: [
           {
             name: "down",

public/example_templates/netjsonmap-indoormap.html

@@ -47,6 +47,10 @@
           render: "map",
           crs: L.CRS.Simple,
           // set map initial state.
+          hashParams: {
+            show: true,
+            type: "indoorMap"
+          },
           mapOptions: {
             center: [48.577, 18.539],
             zoom: 0,

public/example_templates/netjsonmap.html

@@ -72,6 +72,10 @@
       const map = new NetJSONGraph("../assets/data/netjsonmap.json", {
         render: "map",
         // set map initial state.
+        hashParams: {
+          show: true,
+          type: "GeoMap"
+        },
         mapOptions: {
           center: [46.86764405052012, 19.675998687744144],
           zoom: 5,

src/js/netjsongraph.config.js

@@ -284,6 +284,10 @@ const NetJSONGraphDefaultConfig = {
     },
   ],
   linkCategories: [],
+  hashParams: {
+    show: false,
+    type: null,
+  },
 
   /**
    * @function

src/js/netjsongraph.core.js

@@ -68,6 +68,9 @@ class NetJSONGraph {
     this.config.onRender.call(this);
     this.event.once("onReady", this.config.onReady.bind(this));
     this.event.once("onLoad", this.config.onLoad.bind(this));
+    this.event.once("applyHashState", () => {
+      this.utils.applyHashState.call(this, this);
+    });
     this.utils.paginatedDataParse
       .call(this, JSONParam)
       .then((JSONData) => {
@@ -128,7 +131,9 @@ class NetJSONGraph {
 
     if (resParam.length) {
       const renderArray = function _renderArray() {
-        resParam.map((file) => this.utils.JSONDataUpdate.call(this, file, false));
+        resParam.map((file) =>
+          this.utils.JSONDataUpdate.call(this, file, false),
+        );
       };
       this.JSONParam = [JSONParam];
       this.event.once("renderArray", renderArray.bind(this));

src/js/netjsongraph.render.js

@@ -93,6 +93,7 @@ class NetJSONGraphRender {
       "click",
       (params) => {
         const clickElement = configs.onClickElement.bind(self);
+        self.utils.setHashParams(self, params);
         if (params.componentSubType === "graph") {
           return clickElement(
             params.dataType === "edge" ? "link" : "node",
@@ -127,6 +128,7 @@ class NetJSONGraphRender {
   generateGraphOption(JSONData, self) {
     const categories = [];
     const configs = self.config;
+    const params = self.utils.parseHashParams();
     const nodes = JSONData.nodes.map((node) => {
       const nodeResult = JSON.parse(JSON.stringify(node));
       const {nodeStyleConfig, nodeSizeConfig, nodeEmphasisConfig} =
@@ -142,6 +144,7 @@ class NetJSONGraphRender {
       // Preserve original NetJSON node for sidebar use
       /* eslint-disable no-underscore-dangle */
       nodeResult._source = JSON.parse(JSON.stringify(node));
+      self.utils.getSelectedNodeFromHashParams(self, params, node);
 
       return nodeResult;
     });
@@ -201,7 +204,7 @@ class NetJSONGraphRender {
     const flatNodes = JSONData.flatNodes || {};
     const linesData = [];
     let nodesData = [];
-
+    const hashparams = self.utils.parseHashParams();
     nodes.forEach((node) => {
       if (node.properties) {
         // Maintain flatNodes lookup regardless of whether the node is rendered as a marker
@@ -242,6 +245,7 @@ class NetJSONGraphRender {
           });
         }
       }
+      self.utils.getSelectedNodeFromHashParams(self, hashparams, node);
     });
     links.forEach((link) => {
       if (!flatNodes[link.source]) {
@@ -370,12 +374,11 @@ class NetJSONGraphRender {
    */
   graphRender(JSONData, self) {
     self.utils.echartsSetOption(self.utils.generateGraphOption(JSONData, self), self);
-
     window.onresize = () => {
       self.echarts.resize();
     };
-
     self.event.emit("onLoad");
+    self.event.emit("applyHashState");
     self.event.emit("onReady");
     self.event.emit("renderArray");
   }
@@ -652,8 +655,8 @@ class NetJSONGraphRender {
         }
       });
     }
-
     self.event.emit("onLoad");
+    self.event.emit("applyHashState");
     self.event.emit("onReady");
     self.event.emit("renderArray");
   }

src/js/netjsongraph.util.js

@@ -1165,92 +1165,67 @@ class NetJSONGraphUtil {
     };
   }
 
-  parseUrlBounds() {
-    const params = new URLSearchParams(window.location.search);
-    const getFloat = (k) => {
-      const v = params.get(k);
-      return v == null ? null : parseFloat(v);
-    };
-    const swLat = getFloat('swLat');
-    const swLng = getFloat('swLng');
-    const neLat = getFloat('neLat');
-    const neLng = getFloat('neLng');
-    return {
-      swLat, swLng, neLat, neLng,
-      hasBounds:
-        swLat !== null &&
-        swLng !== null &&
-        neLat !== null &&
-        neLng !== null,
-    };
+  /**
+   * Current implementation of hash params covers three scenarios:
+   * 1. For graph visualizations (e.g. network topology), triggers only a click event on the node.
+   * 2. For geographic maps, first stores the clicked node separately in a diffrent key selectedNode
+   * to avoid extra traversal, then sets the map view to the node's [lat, lng] as center and that zoom level.
+   * 3. For indoor maps, only triggers the click event without altering the map view. Any zoom applied via
+   * parameters is overridden because setting the image overlay redefines the map’s center and zoom level.
+   */
+  parseHashParams() {
+    const raw = window.location.hash.replace(/^#/, "");
+    return new URLSearchParams(raw);
   }
 
-  writeBoundsToUrl(self, { precision = 6 } = {}) {
-    if (!self || !self.leaflet) return;
-    try {
-      const b = self.leaflet.getBounds();
-      if (!b || !b.isValid()) return;
-
-      const sw = b.getSouthWest();
-      const ne = b.getNorthEast();
-      const url = new URL(window.location.href);
-      const params = url.searchParams;
-
-      params.set('swLat', (+sw.lat).toFixed(precision));
-      params.set('swLng', (+sw.lng).toFixed(precision));
-      params.set('neLat', (+ne.lat).toFixed(precision));
-      params.set('neLng', (+ne.lng).toFixed(precision));
-
-      url.search = params.toString();
-      window.history.replaceState({}, '', url.toString());
-    } catch (err) {
-      console.warn('writeBoundsToUrl error', err);
+  setHashParams(self, params) {
+    if (!self.config.hashParams.show) return;
+    const {type} = self.config.hashParams;
+      let nodeId;
+      let zoom = null;
+    if (params.componentSubType === "graph") {
+      nodeId = params.data.id;
+    }
+    // scatter, effectScatter signifies the instance of leaflet map
+    // graph signifies the instance of echarts graph
+    if (["scatter", "effectScatter"].includes(params.componentSubType)) {
+      nodeId = params.data.node.id;
+      zoom = self.leaflet.getZoom();
     }
+    const hashParams = new URLSearchParams();
+    hashParams.set("type", type);
+    hashParams.set("nodeId", nodeId);
+    // Only adding zoom for geoMap as graph does not have much zoom levels and for indoor
+    // map zoom is redefined after after adding the image overlay in indoor map
+    if (zoom != null && type === "geoMap") hashParams.set("zoom", zoom);
+    window.location.hash = hashParams.toString();
   }
 
-  restoreBoundsFromUrl(self) {
-    if (!self || !self.leaflet) return;
-    try {
-      const b = this.parseUrlBounds();
-      if (!b.hasBounds) return;
-      this._suspendUrlWrites = true;
-      self.leaflet.whenReady(() => {
-        if (typeof self.leaflet.invalidateSize === 'function') {
-          self.leaflet.invalidateSize();
-        }
-        self.leaflet.fitBounds(
-          L.latLngBounds([b.swLat, b.swLng], [b.neLat, b.neLng]),
-          { animate: false },
-        );
-        setTimeout(() => {
-          this._suspendUrlWrites = false;
-        }, 50);
-      });
-    } catch (e) {
-      console.warn('restoreBoundsFromUrl failed', e);
+  // Getting the node from params and saving it as diffrent key so that it
+  // can be retrived afterwadrs without looping over the data.
+  getSelectedNodeFromHashParams(self, params, node) {
+    if (!self.config.hashParams.show) return;
+    const nodeId = params.get("nodeId");
+      const type = params.get("type");
+      const zoom = params.get("zoom");
+    if (nodeId === node.id) {
+      self.data.selectedNode = node;
+      self.data.selectedNode.type = type;
+      if (zoom != null) self.data.selectedNode.zoom = Number(zoom);
     }
   }
 
-  enableBoundsUrlSync(self, { debounceMs = 300, precision = 6 } = {}) {
-    if (!self || !self.leaflet) return () => {};
-    let timer = null;
-    const write = () => {
-      if (this._suspendUrlWrites) return;
-      this.writeBoundsToUrl(self, { precision });
-    };
-    const debounced = () => {
-      clearTimeout(timer);
-      timer = setTimeout(write, debounceMs);
-    };
-
-    self.leaflet.on('moveend', debounced);
-    self.leaflet.on('zoomend', debounced);
-
-    return () => {
-      self.leaflet.off('moveend', debounced);
-      self.leaflet.off('zoomend', debounced);
-      clearTimeout(timer);
-    };
+  applyHashState(self) {
+    console.log(self);
+    if (!self.config.hashParams.show) return;
+    const node = self.data.selectedNode;
+    if (!node) return;
+    const nodeType = self.config.graphConfig.series.type || self.config.mapOptions.nodeConfig.type;
+    const {location, zoom} = node;
+    if (["scatter", "effectScatter"].includes(nodeType) && zoom != null) {
+      self.leaflet.setView([location.lat, location.lng], zoom);
+    }
+    self.config.onClickElement.call(self, "node", node);
   }
 }