delete node in a backtrack manner done. However, the output_node still stays

static/view-grapher.js

@@ -16,6 +16,7 @@ grapher.Graph = class {
         // My code
         this._modelNodeName2ViewNode = new Map();
         this._modelNodeName2State = new Map();
+        this._namedEdges = new Map();
     }
 
     get options() {
@@ -39,17 +40,10 @@ grapher.Graph = class {
 
         // My code
         const modelNodeName = node.value.name;
-        // console.log(modelNodeName);
-        const viewNode = this._modelNodeName2ViewNode.get(modelNodeName);
-        if (viewNode) {
-            this._modelNodeName2ViewNode[modelNodeName] = node;
-        }
-        else {
-            this._modelNodeName2ViewNode.set(modelNodeName, node);
-        }
-        
+        this._modelNodeName2ViewNode.set(modelNodeName, node);
         this._modelNodeName2State.set(modelNodeName, 'Exist');
 
+        console.log(modelNodeName)
     }
 
     setEdge(edge) {
@@ -63,6 +57,15 @@ grapher.Graph = class {
         if (!this._edges.has(key)) {
             this._edges.set(key, { v: edge.v, w: edge.w, label: edge });
         }
+
+        // My code
+        // _namedEdges: from : to
+        var from_node_name = edge.from.value.name
+        var to_node_name = edge.to.value.name
+        if (!this._namedEdges.has(from_node_name)) {
+            this._namedEdges.set(from_node_name, []);
+        }
+        this._namedEdges.get(from_node_name).push(to_node_name);
     }
 
     setParent(node, parent) {

static/view-sidebar.js

@@ -204,6 +204,7 @@ sidebar.NodeSidebar = class {
         // console.log(node)
         // console.log(this._node)
         this._addButton('Delete');
+        this._addButton('DeleteWithChildren');
         this._addButton('Recover');
         this._addButton('Download');
         this._addButton('RefreshGraph');
@@ -291,19 +292,18 @@ sidebar.NodeSidebar = class {
         // console.log(title)
         if (title === 'Delete') {
             buttonElement.addEventListener('click', () => {
-                console.log(this._host._view._graph._modelNodeName2State.get(this._node.name))
-                this._host._view._graph._modelNodeName2ViewNode.get(this._node.name).element.style.opacity = 0.3;
-                this._host._view._graph._modelNodeName2State.set(this._node.name,'Deleted');
-                console.log(this._host._view._graph._modelNodeName2State.get(this._node.name))
+                this._host._view._graph.delete_node(this._node.name)
+            });
+        }
+        if (title === 'DeleteWithChildren') {
+            buttonElement.addEventListener('click', () => {
+                this._host._view._graph.delete_node_with_children(this._node.name)
             });
         }
         if (title === 'Recover') {
             // console.log('pressed')
             buttonElement.addEventListener('click', () => {
-                console.log(this._host._view._graph._modelNodeName2State.get(this._node.name))
-                this._host._view._graph._modelNodeName2ViewNode.get(this._node.name).element.style.opacity = 1;
-                this._host._view._graph._modelNodeName2State.set(this._node.name,'Existed');
-                console.log(this._host._view._graph._modelNodeName2State.get(this._node.name))
+                this._host._view._graph.recover_node(this._node.name)
             });
         }
 
@@ -338,10 +338,6 @@ sidebar.NodeSidebar = class {
                 this._host._view._updateGraph();
             });
         }
-
-
-
-
     }
 
     toggleInput(name) {

static/view.js

@@ -586,7 +586,7 @@ view.View = class {
                     console.log('node state of lastViewGraph is loaded')
                     viewGraph._modelNodeName2State = this.lastViewGraph._modelNodeName2State;
                 }
-                console.log(viewGraph._modelNodeName2State)
+                // console.log(viewGraph._modelNodeName2State)
                 viewGraph.add(graph);
 
                 // console.log(viewGraph._arguments)
@@ -866,6 +866,8 @@ view.View = class {
 view.Graph = class extends grapher.Graph {
 
     constructor(view, model, compound, options) {
+        // console.log('constructing view.Graph')
+        // console.log(compound)  // undefined
         super(compound, options);
         this.view = view;
         this.model = model;
@@ -1019,6 +1021,38 @@ view.Graph = class extends grapher.Graph {
         }
     }
 
+    // My code
+    delete_node(node_name) {
+        this._modelNodeName2State.set(node_name, 'Deleted');
+        this._modelNodeName2ViewNode.get(node_name).element.style.opacity = 0.3;
+    }
+
+    recover_node(node_name) {
+        this._modelNodeName2State.set(node_name, 'Existed');
+        this._modelNodeName2ViewNode.get(node_name).element.style.opacity = 1;
+    }
+
+
+    delete_node_with_children(node_name) {
+        this.delete_backtrack(node_name);
+    }
+
+    delete_backtrack(node_name) {
+        this._modelNodeName2State.set(node_name, 'Deleted');
+        this._modelNodeName2ViewNode.get(node_name).element.style.opacity = 0.3;
+
+        if (!this._namedEdges.has(node_name)) {
+            return;
+        }
+
+        for (var i = 0; i < this._namedEdges.get(node_name).length; i++) {
+            this.delete_backtrack(this._namedEdges.get(node_name)[i])
+        }
+    }
+
+
+
+
     build(document, origin) {
         for (const argument of this._arguments.values()) {
             argument.build();
@@ -1276,7 +1310,7 @@ view.Argument = class {
                 }
                 const edge = this.context.createEdge(this._from, to);
                 edge.v = this._from.name;
-                edge.w = to.name;
+                edge.w = to.name;             
                 if (content) {
                     edge.label = content;
                 }
@@ -1286,6 +1320,7 @@ view.Argument = class {
                 }
                 this.context.setEdge(edge);
                 this._edges.push(edge);
+                // console.log(this.context._namedEdges);
             }
         }
     }