multiple levels of subtrees viewable

Author: iris-liu0312

app.py

@@ -6,6 +6,9 @@
 nodes = {}
 edges = []
 
+# TODO: look through SDF version documentation to decide what should be in the schema_key_dict
+# TODO: move support to SDF version 1.3
+
 # SDF version 1.2
 schema_key_dict = {
     'root': ['@id', 'name', 'description', 'comment', 'qnode', '@type', 'minDuration', 'maxDuration', 'repeatable', 'TA1explanation', 'importance', 'qlabel'],
@@ -174,6 +177,7 @@ def get_nodes_and_edges(schema):
         # TODO: and, xor gate
         # TODO: optional nodes -- the option is in the cy-style json
             # bug? it doesn't show up on parent node
+            # found: parent node does not have optional key and overwrites child node keys
 
         # === are these two necessary? / what are these for ===
         # TODO: entities

static/src/template/Canvas.jsx

@@ -4,26 +4,31 @@ import cytoscape from 'cytoscape';
 import klay from 'cytoscape-klay';
 
 import axios from 'axios';
-import isNull from 'lodash/isNull';
 import equal from 'fast-deep-equal';
 import RefreshIcon from '@material-ui/icons/Refresh';
 
 import Background from '../public/canvas_bg.png';
 import CyStyle from '../public/cy-style.json';
-import { get } from 'lodash';
 
 cytoscape.use(klay)
 
-// TODO : update subtree to be able to click nodes in subtrees
-
 class Canvas extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
             canvasElements: CytoscapeComponent.normalizeElements(this.props.elements),
-            currentSubtree: null
+            hasSubtree: false,
+            // static copy of topmost tree
+            topTree: null
         }
 
+        // create topTree
+        var treeData = []
+        for (var {data:d} of this.state.canvasElements){
+            treeData.push(d);
+        };
+        this.state.topTree = treeData;
+
         this.showSidebar = this.showSidebar.bind(this);
         this.showSubTree = this.showSubTree.bind(this);
         this.removeSubTree = this.removeSubTree.bind(this);
@@ -42,10 +47,10 @@ class Canvas extends React.Component {
               }
             })
             .then(res => {
-                if (!isNull(this.state.currentSubtree) && this.state.currentSubtree !== res.data) {
-                    this.removeSubTree(this.state.currentSubtree);
+                if (this.state.hasSubtree && this.state.topTree.includes(node)) {
+                    this.removeSubTree();
                 }
-                this.setState({currentSubtree: res.data});
+                this.setState({hasSubtree: true});
                 this.cy.add(res.data);
                 this.runLayout();
             })
@@ -54,17 +59,9 @@ class Canvas extends React.Component {
             })
     }
 
-    removeSubTree(currentSubtree) {
+    removeSubTree() {
         this.reloadCanvas();
-        // const nodes = currentSubtree.nodes;
-        // for (let i = 0; i < nodes.length; i++) {
-        //     if (nodes[i].data._type == 'child' || nodes[i].data.id === 'root') {
-        //         let el = this.cy.getElementById(nodes[i].data.id);
-        //         this.cy.remove(el);
-        //     }
-        // }
-        // this.runLayout();
-        // this.setState({currentSubtree: null});
+        this.setState({hasSubtree: false});
     }
 
     runLayout() {
@@ -79,15 +76,15 @@ class Canvas extends React.Component {
     reloadCanvas() {
         this.setState({
             canvasElements: CytoscapeComponent.normalizeElements(this.props.elements),
-            currentSubtree: null
+            hasSubtree: false,
+            showParticipants: true
         });
         this.cy.elements().remove(); 
         this.cy.add( this.state.canvasElements );
         this.runLayout();
     }
 
     componentDidMount() {
-        console.log('mounted')
         this.cy.ready(() => {
             // left-click 
             this.cy.on('tap', event => {