Collapse manually expanded nodes in the viz

src/browser/modules/D3Visualization/GraphEventHandler.js

@@ -75,6 +75,9 @@ export class GraphEventHandler {
   }
 
   nodeClicked (d) {
+    if (!d) {
+      return
+    }
     d.fixed = true
     if (!d.selected) {
       this.selectItem(d)
@@ -88,11 +91,19 @@ export class GraphEventHandler {
   }
 
   nodeUnlock (d) {
+    if (!d) {
+      return
+    }
     d.fixed = false
     this.deselectItem()
   }
 
   nodeDblClicked (d) {
+    if (d.expanded) {
+      this.nodeCollapse(d)
+      return
+    }
+    d.expanded = true
     const graph = this.graph
     const graphView = this.graphView
     const graphModelChanged = this.graphModelChanged.bind(this)
@@ -101,13 +112,20 @@ export class GraphEventHandler {
       { nodes, relationships }
     ) {
       if (err) return
-      graph.addNodes(mapNodes(nodes))
+      graph.addExpandedNodes(d, mapNodes(nodes))
       graph.addRelationships(mapRelationships(relationships, graph))
       graphView.update()
       graphModelChanged()
     })
   }
 
+  nodeCollapse (d) {
+    d.expanded = false
+    this.graph.collapseNode(d)
+    this.graphView.update()
+    this.graphModelChanged()
+  }
+
   onNodeMouseOver (node) {
     if (!node.contextMenu) {
       this.onItemMouseOver({

src/browser/modules/D3Visualization/lib/visualization/components/graph.js

@@ -34,6 +34,7 @@ export default class Graph {
     this.findRelationship = this.findRelationship.bind(this)
     this.findAllRelationshipToNode = this.findAllRelationshipToNode.bind(this)
     this.nodeMap = {}
+    this.expandedNodeMap = {}
     this._nodes = []
     this.relationshipMap = {}
     this._relationships = []
@@ -74,6 +75,17 @@ export default class Graph {
     }
     return this
   }
+  addExpandedNodes = (node, nodes) => {
+    for (let eNode of Array.from(nodes)) {
+      if (this.findNode(eNode.id) == null) {
+        this.nodeMap[eNode.id] = eNode
+        this._nodes.push(eNode)
+        this.expandedNodeMap[node.id] = this.expandedNodeMap[node.id]
+          ? this.expandedNodeMap[node.id].concat([eNode.id])
+          : [eNode.id]
+      }
+    }
+  }
 
   removeNode (node) {
     if (this.findNode(node.id) != null) {
@@ -83,6 +95,19 @@ export default class Graph {
     return this
   }
 
+  collapseNode = node => {
+    if (!this.expandedNodeMap[node.id]) {
+      return
+    }
+    this.expandedNodeMap[node.id].forEach(id => {
+      const eNode = this.nodeMap[id]
+      this.collapseNode(eNode)
+      this.removeConnectedRelationships(eNode)
+      this.removeNode(eNode)
+    })
+    this.expandedNodeMap[node.id] = []
+  }
+
   updateNode (node) {
     if (this.findNode(node.id) != null) {
       this.removeNode(node)

src/browser/modules/D3Visualization/lib/visualization/renders/icons.js

@@ -19,8 +19,8 @@
  */
 
 const icons = {
-  Expand:
-    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g class="icon"><defs><style>.a{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>Expand</title><circle class="a" cx="13.5" cy="10.498" r="3.75"/><circle class="a" cx="21" cy="2.998" r="2.25"/><circle class="a" cx="21" cy="15.748" r="2.25"/><circle class="a" cx="13.5" cy="20.998" r="2.25"/><circle class="a" cx="3" cy="20.998" r="2.25"/><circle class="a" cx="3.75" cy="5.248" r="2.25"/><line class="a" x1="16.151" y1="7.848" x2="19.411" y2="4.588"/><line class="a" x1="16.794" y1="12.292" x2="19.079" y2="14.577"/><line class="a" x1="13.5" y1="14.248" x2="13.5" y2="18.748"/><line class="a" x1="10.851" y1="13.147" x2="4.59" y2="19.408"/><line class="a" x1="10.001" y1="9.149" x2="5.61" y2="6.514"/></g></svg>',
+  'Expand / Collapse':
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g class="icon"><defs><style>.a{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>Expand / Collapse</title><circle class="a" cx="13.5" cy="10.498" r="3.75"/><circle class="a" cx="21" cy="2.998" r="2.25"/><circle class="a" cx="21" cy="15.748" r="2.25"/><circle class="a" cx="13.5" cy="20.998" r="2.25"/><circle class="a" cx="3" cy="20.998" r="2.25"/><circle class="a" cx="3.75" cy="5.248" r="2.25"/><line class="a" x1="16.151" y1="7.848" x2="19.411" y2="4.588"/><line class="a" x1="16.794" y1="12.292" x2="19.079" y2="14.577"/><line class="a" x1="13.5" y1="14.248" x2="13.5" y2="18.748"/><line class="a" x1="10.851" y1="13.147" x2="4.59" y2="19.408"/><line class="a" x1="10.001" y1="9.149" x2="5.61" y2="6.514"/></g></svg>',
   Unlock:
     '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g class="icon"><defs><style>.a{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>Unlock</title><path class="a" d="M.75,9.75V6a5.25,5.25,0,0,1,10.5,0V9.75"/><rect class="a" x="6.75" y="9.75" width="16.5" height="13.5" rx="1.5" ry="1.5"/><line class="a" x1="15" y1="15" x2="15" y2="18"/></g></svg>',
   Remove:

src/browser/modules/D3Visualization/lib/visualization/renders/menu.js

@@ -183,8 +183,8 @@ const donutExpandNode = new Renderer({
       2,
       'expand_node',
       [-8, -10],
-      'Expand',
-      'Expand child relationships'
+      'Expand / Collapse',
+      'Expand / Collapse child relationships'
     )
   },