feat: focus node by name and version (#308)

* labels for network edge

* adding focusNodeByNameAndVersion

* Revert "labels for network edge"

This reverts commit 13cad2d.

* extracting parseNpmSpec to utils

public/common/utils.js

@@ -77,6 +77,14 @@ export function createLink(href, text = null) {
   return createDOMElement("a", { text, attributes });
 }
 
+export function parseNpmSpec(spec) {
+  const parts = spec.split("@");
+
+  return spec.startsWith("@") ?
+    { name: `@${parts[1]}`, version: parts[2] } :
+    { name: parts[0], version: parts[1] };
+}
+
 export function parseRepositoryUrl(repository = {}, defaultValue = null) {
   if (typeof repository !== "object" || !("url" in repository)) {
     return defaultValue;

public/components/package/pannels/overview/overview.js

@@ -37,9 +37,9 @@ export class Overview {
 
     utils.createItemsList(
       clone.getElementById("usedby"),
-      Object.keys(usedBy),
+      Object.entries(usedBy).map(([name, version]) => `${name}@${version}`),
       {
-        onclick: (_, packageName) => this.package.nsn.focusNodeByName(packageName),
+        onclick: (_, npmSpec) => this.package.nsn.focusNodeByNameAndVersion(...Object.values(utils.parseNpmSpec(npmSpec))),
         hideItems: true
       }
     );

public/components/views/home/home.js

@@ -184,7 +184,7 @@ export class HomeView {
       const element = this.renderPackage(dependency);
       element.addEventListener("click", () => {
         window.navigation.setNavByName("network--view");
-        setTimeout(() => this.nsn.focusNodeByName(dependency.name), 25);
+        setTimeout(() => this.nsn.focusNodeByNameAndVersion(dependency.name, dependency.version), 25);
       });
       if (hideItems && id >= maxPackages) {
         element.classList.add("hidden");

public/components/views/home/maintainers/maintainers.js

@@ -136,15 +136,15 @@ export class PopupMaintainer {
     const fragment = document.createDocumentFragment();
 
     for (const spec of this.data.packages) {
-      const { name, version } = this.parseNpmSpec(spec);
+      const { name, version } = utils.parseNpmSpec(spec);
 
       const iconNetwork = utils.createDOMElement("i", {
         className: "icon-right-open-big"
       });
       iconNetwork.addEventListener("click", () => {
         window.popup.close();
         window.navigation.setNavByName("network--view");
-        setTimeout(() => this.nsn.focusNodeByName(name), 25);
+        setTimeout(() => this.nsn.focusNodeByNameAndVersion(name, version), 25);
       });
 
       fragment.appendChild(
@@ -161,12 +161,4 @@ export class PopupMaintainer {
     clone.querySelector(".maintainers--packages")
       .appendChild(fragment);
   }
-
-  parseNpmSpec(spec) {
-    const parts = spec.split("@");
-
-    return spec.startsWith("@") ?
-      { name: `@${parts[1]}`, version: parts[2] } :
-      { name: parts[0], version: parts[1] };
-  }
 }

workspaces/vis-network/docs/NodeSecureNetwork.md

@@ -5,6 +5,7 @@ const nsn = new NodeSecureNetwork(secureDataSet);
 
 nsn.focusNodeById(0); // 0 is root Node
 nsn.focusNodeByName("express"); // Focus by package name
+nsn.focusNodeByNameAndVersion("express", "4.18.2"); // Focus by package name and version
 
 // Search for neighbours id of root Node
 const ids = [...nsn.searchForNeighbourIds(0)];

workspaces/vis-network/src/network.js

@@ -130,6 +130,34 @@ export default class NodeSecureNetwork {
     return false;
   }
 
+  /**
+   * @description Focus/move to a Node by package name and version
+   * @param {!string} packageName
+   * @param {!string} version
+   * @returns {boolean}
+   */
+  focusNodeByNameAndVersion(packageName, version) {
+    if (!version || !version.trim()){
+      return this.focusNodeByName(packageName);
+    }
+
+    let wantedId = null;
+    for (const [id, opt] of this.linker) {
+      if (opt.name === packageName && opt.version === version) {
+        wantedId = id;
+        break;
+      }
+    }
+
+    if (wantedId !== null) {
+      this.focusNodeById(wantedId);
+
+      return true;
+    }
+
+    return false;
+  }
+
   /**
    * @param {!number} node
    * @param {boolean} hidden