fix(selection): commit selection changes in unselectAll (#1200)

* fix(types): setSelection selection props are optional

* chore(test): add simple sort arrays helper to ignore array order when it doesn't matter

* test(selection-handler): programmatic selection setting

* fix(unselect-all): commit selection changes

cypress/integration/visual/selection.spec.ts

@@ -22,7 +22,7 @@ context("Selection", (): void => {
         ],
         physics: false,
       },
-      { requireNewerVersionThan: "8.5.0" }
+      { requireNewerVersionThan: "8.5.3" }
     );
   });
 
@@ -135,4 +135,24 @@ context("Selection", (): void => {
 
     cy.visSnapshotOpenedPage("select-via-method");
   });
+
+  it("Programatic selection", function (): void {
+    cy.visRun(({ network }): void => {
+      network.setSelection({ nodes: ["N_1", "N_5"] }, { unselectAll: false });
+    });
+    cy.visSnapshotOpenedPage("programmatic-select-nodes");
+
+    cy.visRun(({ network }): void => {
+      network.setSelection(
+        { edges: ["E_2-3", "E_3-4"] },
+        { unselectAll: false }
+      );
+    });
+    cy.visSnapshotOpenedPage("programmatic-select-edges");
+
+    cy.visRun(({ network }): void => {
+      network.unselectAll();
+    });
+    cy.visSnapshotOpenedPage("programmatic-select-unselect-all");
+  });
 });

lib/network/modules/SelectionHandler.js

@@ -363,6 +363,7 @@ class SelectionHandler {
    */
   unselectAll() {
     this._selectionAccumulator.clear();
+    this._selectionAccumulator.commit();
   }
 
   /**

test/helpers/index.ts

@@ -51,3 +51,27 @@ export function deepFreeze<T extends object>(
 
   return recursivelyFreeze(object);
 }
+
+/**
+ * Sort arrays in given input.
+ *
+ * @remarks
+ * This is intended to be used with assertions when the order doesn't matter.
+ *
+ * @param input - The input whose arrays should be sorted (in-place).
+ *
+ * @returns The input (same reference).
+ */
+export function sortArrays<T>(input: any): T {
+  if (Array.isArray(input)) {
+    input.sort();
+  }
+
+  if (typeof input === "object" && input !== null) {
+    for (const key of Reflect.ownKeys(input)) {
+      sortArrays(input[key]);
+    }
+  }
+
+  return input;
+}

test/network/selection.test.js

@@ -0,0 +1,81 @@
+import { expect } from "chai";
+import Network from "../../lib/network/Network";
+import canvasMockify from "../canvas-mock";
+import { sortArrays } from "../helpers";
+
+describe("Network", function () {
+  before(function () {
+    this.jsdom_global = canvasMockify("<div id='mynetwork'></div>");
+    this.container = document.getElementById("mynetwork");
+  });
+
+  after(function () {
+    this.jsdom_global();
+  });
+
+  it("programatic selection", function () {
+    const network = new Network(
+      this.container,
+      {
+        nodes: [
+          { id: "N_1" },
+          { id: "N_2" },
+          { id: "N_3" },
+          { id: "N_4" },
+          { id: "N_5" },
+        ],
+        edges: [
+          { id: "E_1-2", from: "N_1", to: "N_2" },
+          { id: "E_1-3", from: "N_1", to: "N_3" },
+          { id: "E_1-4", from: "N_1", to: "N_4" },
+          { id: "E_1-5", from: "N_1", to: "N_5" },
+
+          { id: "E_2-3", from: "N_2", to: "N_3" },
+          { id: "E_3-4", from: "N_3", to: "N_4" },
+          { id: "E_4-5", from: "N_4", to: "N_5" },
+          { id: "E_5-2", from: "N_5", to: "N_2" },
+        ],
+      },
+      { physics: false }
+    );
+
+    // Select a node with it's edges.
+    network.setSelection({ nodes: ["N_5"] }, { unselectAll: false });
+    expect(sortArrays(network.getSelection())).to.deep.equal(
+      sortArrays({
+        nodes: ["N_5"],
+        edges: ["E_1-5", "E_4-5", "E_5-2"],
+      })
+    );
+
+    // Select a node without it's edges.
+    network.setSelection(
+      { nodes: ["N_1"] },
+      { highlightEdges: false, unselectAll: false }
+    );
+    expect(sortArrays(network.getSelection())).to.deep.equal(
+      sortArrays({
+        nodes: ["N_1", "N_5"],
+        edges: ["E_1-5", "E_4-5", "E_5-2"],
+      })
+    );
+
+    // Select some edges.
+    network.setSelection({ edges: ["E_2-3", "E_3-4"] }, { unselectAll: false });
+    expect(sortArrays(network.getSelection())).to.deep.equal(
+      sortArrays({
+        nodes: ["N_1", "N_5"],
+        edges: ["E_1-5", "E_4-5", "E_5-2", "E_2-3", "E_3-4"],
+      })
+    );
+
+    // Unselect all.
+    network.unselectAll();
+    expect(sortArrays(network.getSelection())).to.deep.equal(
+      sortArrays({
+        nodes: [],
+        edges: [],
+      })
+    );
+  });
+});

types/network/Network.d.ts

@@ -498,7 +498,7 @@ export class Network {
    * You can also pass only nodes or edges in selection object.
    *
    */
-  setSelection(selection: { nodes: IdType[], edges: IdType[] }, options?: SelectionOptions): void;
+  setSelection(selection: { nodes?: IdType[], edges?: IdType[] }, options?: SelectionOptions): void;
 
   /**
    * Unselect all objects.