Merge pull request #18 from wwlib/feature/andrewrapo/merge-data

added support for merging new d3 data with existing d3 data

Author: wwlib

package.json

@@ -52,7 +52,7 @@
   "dependencies": {
     "d3": "^4.12.0",
     "font-awesome": "^4.7.0",
-    "graph-diagram": "0.0.10",
+    "graph-diagram": "wwlib/graph-diagram#v0.0.11",
     "graphlib-dot": "^0.6.4",
     "neo4j-driver": "^4.2.3",
     "osenv": "^0.1.5",

src/components/graphDiagram/CypherPanel.tsx

@@ -89,6 +89,9 @@ export default class CypherPanel extends React.Component<CypherPanelProps, Cyphe
                 case 'run':
                     this.executeCypher(this.state.activeCypher);
                     break;
+                case 'runAdd': // add to the existing graph
+                    this.executeCypher(this.state.activeCypher, true);
+                    break;
                 case 'new':
                     this.newSavedCypher();
                     break;
@@ -116,9 +119,9 @@ export default class CypherPanel extends React.Component<CypherPanelProps, Cyphe
         }
     }
 
-    executeCypher(activeCypher: SavedCypher): void {
+    executeCypher(activeCypher: SavedCypher, addToExistingGraph: boolean = false): void {
         // this.props.appModel.executeCypher(activeCypher.cypher);
-        this.props.appModel.createGraphModelWithCypherQuery(activeCypher.cypher);
+        this.props.appModel.createGraphModelWithCypherQuery(activeCypher.cypher, { addToExistingGraph: addToExistingGraph });
     }
 
     newSavedCypher(): void {
@@ -200,6 +203,8 @@ export default class CypherPanel extends React.Component<CypherPanelProps, Cyphe
                     </ReactBootstrap.Table>
                     <ReactBootstrap.Button variant={'default'} key={"run"} style = {{width: 80}}
                         onClick={this.onButtonClicked.bind(this, "run")}>Run</ReactBootstrap.Button>
+                    <ReactBootstrap.Button variant={'default'} key={"runAdd"} style = {{width: 80}}
+                        onClick={this.onButtonClicked.bind(this, "runAdd")}>Run+</ReactBootstrap.Button>
                     <ReactBootstrap.Button variant={'default'} key={"new"} style = {{width: 80}}
                         onClick={this.onButtonClicked.bind(this, "new")}>New</ReactBootstrap.Button>
                     <ReactBootstrap.Button variant={'default'} key={"delete"} style = {{width: 80}}

src/model/AppModel.ts

@@ -208,19 +208,31 @@ circle.node-base {
             case "neo4j":
                 this.neo4jController = new Neo4jController({ debug: true, connection: graph.connection });
                 graph.config = new Neo4jGraphConfig(graph.config);
-                this.createGraphModelWithCypherQuery(graph.connection.initialCypher, graph);
+                this.createGraphModelWithCypherQuery(graph.connection.initialCypher, { graph: graph });
                 break;
         }
     }
 
-    createGraphModelWithCypherQuery(cypher: string, graph?: Graph): void {
-        console.log(`createGraphModelWithCypherQuery: cypher: ${cypher}`, graph);
-        graph = graph || this.activeGraph;
+    createGraphModelWithCypherQuery(cypher: string, options?: any): void {
+        let graph: Graph | undefined = this.activeGraph;
+        let addToExistingGraph: boolean = false;
+        if (options) {
+            graph = options.graph || graph;
+            addToExistingGraph = options.addToExistingGraph;
+        }
+        console.log(`createGraphModelWithCypherQuery: cypher: ${cypher}`, graph, addToExistingGraph);
         if(this.neo4jController) {
             this.neo4jController.getCypherAsD3(cypher)
                 .then(data => {
                     console.log(data);
-                    this.graphModel = ModelToD3.parseD3(data, undefined, this.getSvgOrigin());
+                    let newGraphModel = ModelToD3.parseD3(data, undefined, this.getSvgOrigin());
+                    if (addToExistingGraph) {
+                        const existingData: any = ModelToD3.convert(this.graphModel);
+                        const mergedData = ModelToD3.mergeD3(data, existingData);
+                        console.log(mergedData);
+                        newGraphModel = ModelToD3.parseD3(mergedData, undefined, this.getSvgOrigin());
+                    }
+                    this.graphModel = newGraphModel;
                     this._activeNode = this.graphModel.nodeList()[0];
                     this._activeRelationship = this.graphModel.relationshipList()[0];
                     this.activeGraph = graph;

src/neo4j/helpers/BoltToD3.ts

@@ -12,7 +12,11 @@ export default class BoltToD3 {
     }
 
     isLink(field: any) {
-        return field.start && field.end;
+        let result: boolean = false;
+        if (field && field.start && field.end) {
+            result = true;
+        }
+        return result;
     }
 
     isNode(field: any) {
@@ -124,7 +128,7 @@ export default class BoltToD3 {
                 fieldCandidate.forEach((field: any) => {
                     fieldArray.push(field);
                 })
-            } else {
+            } else if (fieldCandidate){
                 fieldArray.push(fieldCandidate);
             }
             fieldArray.forEach((field: any) => {

yarn.lock

@@ -6296,10 +6296,9 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6
   resolved "https://npm.jibo.com/repository/ntt/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"
   integrity sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==
 
-[email protected]:
-  version "0.0.10"
-  resolved "https://registry.npmjs.org/graph-diagram/-/graph-diagram-0.0.10.tgz#56611ff6e9d32c6355c756f0519fb04eb644f540"
-  integrity sha1-VmEf9unTLGNVx1bwUZ+wTrZE9UA=
+graph-diagram@wwlib/graph-diagram#v0.0.11:
+  version "0.0.11"
+  resolved "https://codeload.github.com/wwlib/graph-diagram/tar.gz/00620064fe934a7df44d33f3d979c4307e0a8a37"
 
 graphlib-dot@^0.6.4:
   version "0.6.4"