[fix] Update name of config to bookmarkableActions and some corner cases

Author: dee077

public/example_templates/netjsongraph.html

@@ -88,8 +88,8 @@
             },
           },
         ],
-        urlFragments: {
-          show: true,
+        bookmarkableActions: {
+          enabled: true,
           id: "basicUsage",
         },
         prepareData: (data) => {

public/example_templates/netjsonmap-indoormap-overlay.html

@@ -85,8 +85,8 @@
           },
           baseOptions: {media: [{option: {tooltip: {show: true}}}]},
         },
-        urlFragments: {
-          show: true,
+        bookmarkableActions: {
+          enabled: true,
           id: "geoMap",
         },
         prepareData: (data) => {
@@ -156,8 +156,8 @@
               },
               baseOptions: {media: [{option: {tooltip: {show: true}}}]},
             },
-            urlFragments:{
-              show: true,
+            bookmarkableActions:{
+              enabled: true,
               id: "indoorMap",
             },
             prepareData: (data) => {

public/example_templates/netjsonmap-indoormap.html

@@ -106,8 +106,8 @@
               ],
             },
           },
-          urlFragments: {
-            show: true,
+          bookmarkableActions: {
+            enabled: true,
             id: "indoorMap"
           },
 

public/example_templates/netjsonmap.html

@@ -71,9 +71,8 @@
     <script type="text/javascript">
       const map = new NetJSONGraph("../assets/data/netjsonmap.json", {
         render: "map",
-        // set map initial state.
-        urlFragments: {
-          show: true,
+        bookmarkableActions: {
+          enabled: true,
           id: "geographicMap"
         },
         mapOptions: {
@@ -100,7 +99,7 @@
             },
           },
         ],
-        // Convert to internal json format
+
         prepareData: (data) => {
           data.nodes.map((node) => {
             node.label = node.name;

src/js/netjsongraph.config.js

@@ -285,8 +285,8 @@ const NetJSONGraphDefaultConfig = {
     },
   ],
   linkCategories: [],
-  urlFragments: {
-    show: false,
+  bookmarkableActions: {
+    enabled: false,
     id: null,
   },
 

src/js/netjsongraph.render.js

@@ -93,6 +93,7 @@ class NetJSONGraphRender {
       "click",
       (params) => {
         const clickElement = configs.onClickElement.bind(self);
+        self.utils.setUrlFragments(self, params);
         if (params.componentSubType === "graph") {
           return clickElement(
             params.dataType === "edge" ? "link" : "node",
@@ -102,7 +103,6 @@ class NetJSONGraphRender {
         if (params.componentSubType === "graphGL") {
           return clickElement("node", params.data);
         }
-        self.utils.setUrlFragments(self, params);
         return params.componentSubType === "lines"
           ? clickElement("link", params.data.link)
           : !params.data.cluster && clickElement("node", params.data.node);

src/js/netjsongraph.util.js

@@ -1214,9 +1214,9 @@ class NetJSONGraphUtil {
   }
 
   setUrlFragments(self, params) {
-    if (!self.config.urlFragments.show) return;
+    if (!self.config.bookmarkableActions.enabled) return;
     const fragments = this.parseUrlFragments();
-    const id = self.config.urlFragments.id;
+    const id = self.config.bookmarkableActions.id;
     let nodeId, zoom;
     if (params.componentSubType === "graph") {
       nodeId = params.data.id;
@@ -1225,49 +1225,45 @@ class NetJSONGraphUtil {
       nodeId = params.data.node.id;
     }
     zoom = self?.leaflet?.getZoom();
-    if (!fragments[id]) {
+    if (!fragments[id] || !(fragments[id] instanceof URLSearchParams)) {
       fragments[id] = new URLSearchParams();
       fragments[id].set("id", id);
     }
     fragments[id].set("nodeId", nodeId);
-    if (zoom != undefined) {
+    if (zoom != null) {
       fragments[id].set("zoom", zoom);
     }
     window.location.hash = this.generateUrlFragments(fragments);
   }
 
-  removeUrlFragment(self) {
-    if (!self.config.urlFragments.show) return;
+  removeUrlFragment(self, id) {
+    if (!self.config.bookmarkableActions.enabled) return;
 
     const fragments = this.parseUrlFragments();
-    const id = self.config.urlFragments.id;
     if (fragments[id]) {
       delete fragments[id];
     }
     window.location.hash = this.generateUrlFragments(fragments);
   }
 
   setSelectedNodeFromUrlFragments(self, fragments, node) {
-    if (!self.config.urlFragments.show || !Object.keys(fragments).length) return;
-    const id = self.config.urlFragments.id;
+    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 != undefined) self.selectedNode.zoom = Number(zoom);
+      if (zoom != null) self.selectedNode.zoom = Number(zoom);
     }
   }
 
   applyUrlFragmentState(self) {
-    if (!self.config.urlFragments.show) return;
+    if (!self.config.bookmarkableActions.enabled) return;
     const node = self.selectedNode;
     if (!node) return;
     const nodeType =
       self.config.graphConfig.series.type || self.config.mapOptions.nodeConfig.type;
-    const {
-      properties: {location},
-      zoom,
-    } = node;
+    const { location, zoom } = node;
     if (["scatter", "effectScatter"].includes(nodeType) && zoom != null) {
       self.leaflet.setView([location.lat, location.lng], zoom);
     }

test/netjsongraph.util.test.js

@@ -202,7 +202,6 @@ describe("Test URL fragment utilities", () => {
   });
 
   test("Test parseUrlFragments parses multiple fragments and decodes values", () => {
-    // use ids that match what we will assert on
     window.location.hash =
       "#id=geoMap&nodeId=abc%3A123&zoom=5;id=indoorMap&nodeId=indoor-node&zoom=5";
     const fragments = utils.parseUrlFragments();
@@ -216,7 +215,7 @@ describe("Test URL fragment utilities", () => {
   test("Test setUrlFragments adds a new fragment with nodeId and zoom", () => {
     const self = {
       config: {
-        urlFragments: {show: true, id: "geoMap"},
+        bookmarkableActions: {enabled: true, id: "geoMap"},
       },
       leaflet: {getZoom: () => 7},
     };
@@ -238,7 +237,7 @@ describe("Test URL fragment utilities", () => {
     window.location.hash = "id=graph&nodeId=node-1";
 
     const self = {
-      config: {urlFragments: {show: true, id: "geo"}},
+      config: {bookmarkableActions: {enabled: true, id: "geo"}},
       leaflet: {getZoom: () => 9},
     };
     const params = {
@@ -258,8 +257,8 @@ describe("Test URL fragment utilities", () => {
 
   test("removeUrlFragment deletes the fragment for the given id", () => {
     window.location.hash = "id=keep&nodeId=a;id=removeMe&nodeId=b";
-    const self = {config: {urlFragments: {show: true, id: "removeMe"}}};
-    utils.removeUrlFragment(self);
+    const self = {config: {bookmarkableActions: {enabled: true, id: "removeMe"}}};
+    utils.removeUrlFragment(self, "removeMe");
     const fragments = utils.parseUrlFragments();
     expect(fragments.keep).toBeDefined();
     expect(fragments.removeMe).toBeUndefined();
@@ -268,10 +267,9 @@ describe("Test URL fragment utilities", () => {
 
   test("Test setSelectedNodeFromUrlFragments sets selectedNode and numeric zoom", () => {
     window.location.hash = "#id=geo&nodeId=abc&zoom=4";
-    const self = {config: {urlFragments: {show: true, id: "geo"}}};
+    const self = {config: {bookmarkableActions: {enabled: true, id: "geo"}}};
     const fragments = utils.parseUrlFragments();
 
-    // node with matching id
     const node = {id: "abc", properties: {}};
     utils.setSelectedNodeFromUrlFragments(self, fragments, node);
 
@@ -291,7 +289,7 @@ describe("Test URL fragment utilities", () => {
 
     const self = {
       config: {
-        urlFragments: {show: true, id: "geo"},
+        bookmarkableActions: {enabled: true, id: "geo"},
         graphConfig: {series: {type: null}},
         mapOptions: {nodeConfig: {type: "scatter"}},
         onClickElement: mockOnClick,

webpack.config.js

@@ -29,8 +29,7 @@ module.exports = (env, argv) => ({
   },
   devtool: argv.mode === "development" ? "eval-source-map" : "source-map",
   optimization: {
-    // Todo: Make it false
-    minimize: false,
+    minimize: true,
     minimizer: argv.mode === "production" ? minimizer : [],
   },
   module: {