add selection feature

Select a node or link while holding the CTRL key.

Author: mwarning

src/js/netjsongraph.config.js

@@ -85,10 +85,39 @@ const NetJSONGraphDefaultConfig = {
       legendHoverLink: true,
       emphasis: {
         focus: "none",
+        scale: 2,
         lineStyle: {
           color: "#3acc38",
           opacity: 1,
         },
+        itemStyle: {
+          //color: "#3acc38",
+          color: {
+            type: "radial",
+            x: 0.5,
+            y: 0.5,
+            r: 0.5,
+            colorStops: [
+              {
+                offset: 0,
+                color: "#ffebc4",
+              },
+              {
+                offset: 0.5,
+                color: "#ffebc4",
+              },
+              {
+                offset: 0.51,
+                color: "#ffffff33",
+              },
+              {
+                offset: 1,
+                color: "#ffffff33",
+              },
+            ],
+            opacity: 1,
+          },
+        },
       },
       nodeStyle: {
         color: "#ffebc4",
@@ -172,6 +201,37 @@ const NetJSONGraphDefaultConfig = {
       nodeStyle: {
         color: "#1566a9",
       },
+      emphasis: {
+        focus: "none",
+        scale: 2,
+        itemStyle: {
+          color: {
+            type: "radial",
+            x: 0.5,
+            y: 0.5,
+            r: 0.5,
+            colorStops: [
+              {
+                offset: 0,
+                color: "#1566a9",
+              },
+              {
+                offset: 0.5,
+                color: "#1566a9",
+              },
+              {
+                offset: 0.51,
+                color: "green",
+              },
+              {
+                offset: 1,
+                color: "green",
+              },
+            ],
+            opacity: 1,
+          },
+        },
+      },
       nodeSize: "17",
     },
     linkConfig: {

src/js/netjsongraph.core.js

@@ -1,6 +1,119 @@
 import NetJSONGraphDefaultConfig from "./netjsongraph.config";
 import NetJSONGraphUpdate from "./netjsongraph.update";
 
+class Selection {
+  constructor() {
+    this.selected = new Set();
+  }
+
+  getSetId(item) {
+    if (item.node) {
+      // map node
+      return item.node.id;
+    } else if (item.link) {
+      // map link
+      return (item.link.source + "=>" + item.link.target);
+    } else if (item.id) {
+      // graph node
+      return item.id;
+    } else {
+      // graph link
+      return (item.source + "=>" + item.target);
+    }
+  }
+
+  isSelected(item) {
+    let id = this.getSetId(item);
+    return this.selected.has(id);
+  }
+
+  toggleSelection(item) {
+    let id = this.getSetId(item);
+
+    if (this.selected.has(id)) {
+      this.selected.delete(id)
+      return false;
+    } else {
+      this.selected.add(id);
+      return true;
+    }
+  }
+
+  changeSelection(echarts, params) {
+    const multiSelectKey = (window.event.ctrlKey || window.event.metaKey);
+    const isSelectionEmpty = (this.selected.size === 0);
+
+    if (multiSelectKey) {
+      if (this.toggleSelection(params.data)) {
+        echarts.dispatchAction(
+          { type: 'highlight', seriesIndex: params.seriesIndex, dataType: params.dataType, dataIndex: params.dataIndex}
+        )
+      } else {
+        echarts.dispatchAction(
+          { type: 'downplay', seriesIndex: params.seriesIndex, dataType: params.dataType, dataIndex: params.dataIndex}
+        )
+      }
+    } else if (!isSelectionEmpty) {
+      const option = echarts.getOption();
+      let nodeIndexes = [];
+      let linkIndexes = [];
+      if (option.leaflet) {
+        // map
+        const nodeData = option.leaflet[0].mapOptions.nodeConfig.data;
+        const linkData = option.leaflet[0].mapOptions.linkConfig.data;
+        nodeIndexes = nodeData.map((node, index) => index);
+        linkIndexes = linkData.map((link, index) => index);
+      } else {
+        // graph
+        const nodeData = option.series[0].nodes;
+        const linkData = option.series[0].links;
+        nodeIndexes = nodeData.map((node, index) => index);
+        linkIndexes = linkData.map((link, index) => index);
+      }
+
+      // downplay all items
+      echarts.dispatchAction(
+        { type: 'downplay', seriesIndex: 0, batch: [
+            {dataType: "node", dataIndex: nodeIndexes},
+            {dataType: "edge", dataIndex: linkIndexes},
+          ]
+        }
+      )
+
+      this.selected.clear();
+    }
+  }
+
+  // called when switching between graph/map view
+  highlightSelected(echarts) {
+    const option = echarts.getOption();
+
+    let nodeIndexes = [];
+    let linkIndexes = [];
+    if (option.leaflet) {
+      // map
+      const nodeData = option.leaflet[0].mapOptions.nodeConfig.data;
+      const linkData = option.leaflet[0].mapOptions.linkConfig.data;
+      nodeIndexes = nodeData.map((node, index) => this.isSelected(node) ? index : -1);
+      linkIndexes = linkData.map((link, index) => this.isSelected(link) ? index : -1);
+    } else {
+      // graph
+      const nodeData = option.series[0].nodes;
+      const linkData = option.series[0].links;
+      nodeIndexes = nodeData.map((node, index) => this.isSelected(node) ? index : -1);
+      linkIndexes = linkData.map((link, index) => this.isSelected(link) ? index : -1);
+    }
+
+    echarts.dispatchAction(
+      { type: 'highlight', seriesIndex: 0, batch: [
+          {dataType: "node", dataIndex: nodeIndexes},
+          {dataType: "edge", dataIndex: linkIndexes},
+        ]
+      }
+    )
+  }
+}
+
 class NetJSONGraph {
   /**
    * @constructor
@@ -10,6 +123,7 @@ class NetJSONGraph {
    */
   constructor(JSONParam) {
     this.utils = new NetJSONGraphUpdate();
+    this.selection = new Selection();
     this.config = {...NetJSONGraphDefaultConfig};
     this.JSONParam = this.utils.isArray(JSONParam) ? JSONParam : [JSONParam];
   }

src/js/netjsongraph.js

@@ -151,6 +151,8 @@ class NetJSONGraph {
           document.querySelector(".leaflet-control-zoom").style.display =
             "block";
         }
+
+        this.selection.highlightSelected(this.echarts);
       };
     }
     this.utils.hideLoading.call(this);

src/js/netjsongraph.render.js

@@ -98,6 +98,8 @@ class NetJSONGraphRender {
     echartsLayer.on(
       "click",
       (params) => {
+        self.selection.changeSelection(self.echarts, params);
+
         const clickElement = configs.onClickElement.bind(self);
         if (params.componentSubType === "graph") {
           return clickElement(