From 48b59c12de6a29229b393d508f530112c1dc7b55 Mon Sep 17 00:00:00 2001 From: Daniel Buckmaster Date: Thu, 15 May 2014 18:01:57 +1000 Subject: [PATCH 1/2] Rearrange everything to let edges be deleted. --- src/editing-plugin.js | 10 +++ src/knowledge-map.js | 186 ++++++++++++++++++++++-------------------- 2 files changed, 107 insertions(+), 89 deletions(-) diff --git a/src/editing-plugin.js b/src/editing-plugin.js index 8abd342..41c0d23 100644 --- a/src/editing-plugin.js +++ b/src/editing-plugin.js @@ -149,10 +149,20 @@ function addConnectionEditing(graph, nodes) { return nodes; } +function addEdgeDeleteButtons(graph, edges) { + var kg = this; + edges.select('path') + .style('cursor', 'pointer') + .on('click', function(depID) { + kg.removeDependency({dependency: depID}); + }); +} + function setupEditing(kg) { kg.onEvent('renderGraph', function(e) { addConnectionEditing.call(kg, e.graph, e.nodes); addChangeableLabels.call(kg, e.graph, e.nodes); + addEdgeDeleteButtons.call(kg, e.graph, e.edges); }); }; diff --git a/src/knowledge-map.js b/src/knowledge-map.js index 728b15f..1b5e590 100644 --- a/src/knowledge-map.js +++ b/src/knowledge-map.js @@ -11,27 +11,21 @@ will be rendered by dagre-d3. json: TODO describe what the json should look like */ -var createGraph = function(json) { - var graph = new dagreD3.Digraph(); +var createGraph = function(kg, json) { + var graph = kg.graph = new dagreD3.Digraph(); + if (!json) + return; - if (json && json.concepts) { + if (json.concepts) { // Add all the concepts as nodes json.concepts.forEach(function(concept) { - graph.addNode(concept.id, { - label: concept.name, - concept: concept, - }); + kg.addConcept({concept: concept}); }); - // Check each concept for dependencies and add them as edges - json.concepts.forEach(function(concept) { - if (Array.isArray(concept.dependencies)) { - concept.dependencies.forEach(function(dep) { - // Add an edge from the dependency to the concept with a null edge ID - graph.addEdge(dep+'-'+concept.id, dep, concept.id); - }); - } else { - // Dependencies is undefine/not an array and we'll figure out what to do with it later - } + } + + if (json.dependencies) { + json.dependencies.forEach(function(dep) { + kg.addDependency(dep); }); } @@ -154,66 +148,6 @@ Accepts a single object: var KnowledgeMap = function(api, config) { config = config || {}; - // Create the directed graph - var graph = this.graph = createGraph(config.graph); - - // Create an element on the page for us to render our graph in - var parentName = config.inside || 'body'; - var element = this.element = d3.select(parentName).append('svg'); - - // Use dagre-d3 to render the graph - var renderer = this.renderer = new dagreD3.Renderer(); - var layout = this.layout = dagreD3.layout().rankSep(50); - if (config.layout) { - if (config.layout.verticalSpace) layout.rankSep(config.layout.verticalSpace); - if (config.layout.horizontalSpace) layout.nodeSep(config.layout.horizontalSpace); - if (config.layout.direction) layout.rankDir(config.layout.direction); - } - - // Update the way edges are positioned - renderer.layout(layout); - renderer.positionEdgePaths(positionEdgePaths); - - // Add transitions for graph updates - renderer.transition(function(selection) { - var duration; - if (config && config.transitionDuration !== undefined) { - duration = config.transitionDuration; - } else { - duration = 500; - } - - if (duration) { - return selection - .transition() - .duration(duration); - } else { - return selection; - } - }); - - // Add enter/exit circles - var kg = this; - var drawNodes = renderer.drawNodes(); - renderer.drawNodes(function(graph, element) { - var nodes = drawNodes(graph, element); - - // Add class labels - nodes.attr('id', function(d) { return d; }); - - // Add burger buns - drawHamburgers.call(kg, graph, nodes); - - // Add interactivity - kg.postEvent({ - type: 'renderGraph', - graph: graph, - nodes: nodes - }); - - return nodes; - }); - /* Message API */ @@ -244,6 +178,7 @@ var KnowledgeMap = function(api, config) { */ this.addConcept = function(config) { var kg = this; + window.kg = kg; // Add node to the graph this.graph.addNode(config.concept.id, { @@ -296,7 +231,7 @@ var KnowledgeMap = function(api, config) { } // Add the edge to the graph - this.graph.addEdge(dep+'-'+concept.id, dep, concept.id); + this.graph.addEdge(dep+'-'+concept.id, dep, concept.id, { dependency: config }); // Update the graph display this.render(); @@ -308,20 +243,28 @@ var KnowledgeMap = function(api, config) { */ this.removeDependency = function(config) { - // Get ids of concepts - var con = config.concept; - var dep = config.dependency; + if (config.concept) { + // Get ids of concepts + var con = config.concept; + var dep = config.dependency; + + // Remove the dependency from the concept + var concept = this.graph.node(con).concept; + if (concept.dependencies) { + var index = concept.dependencies.indexOf(dep); + concept.dependencies.splice(index, 1); + } - // Remove the dependency from the concept - var concept = this.graph.node(con).concept; - if (concept.dependencies) { - var index = concept.dependencies.indexOf(dep); - concept.dependencies.splice(index, 1); + // Remove the edge from the graph + this.graph.delEdge(dep+'-'+con); + } else { + var dep = this.graph.edge(config.dependency).dependency; + this.removeDependency({ + concept: dep.concept.id, + dependency: dep.dependency + }); } - // Remove the edge from the graph - this.graph.delEdge(dep+'-'+con); - // Update the graph display this.render(); }; @@ -385,6 +328,71 @@ var KnowledgeMap = function(api, config) { this.__defineSetter__('plugins', function() {}); } + // Create an element on the page for us to render our graph in + var parentName = config.inside || 'body'; + var element = this.element = d3.select(parentName).append('svg'); + + // Use dagre-d3 to render the graph + var renderer = this.renderer = new dagreD3.Renderer(); + var layout = this.layout = dagreD3.layout().rankSep(50); + if (config.layout) { + if (config.layout.verticalSpace) layout.rankSep(config.layout.verticalSpace); + if (config.layout.horizontalSpace) layout.nodeSep(config.layout.horizontalSpace); + if (config.layout.direction) layout.rankDir(config.layout.direction); + } + + // Update the way edges are positioned + renderer.layout(layout); + renderer.positionEdgePaths(positionEdgePaths); + + // Add transitions for graph updates + renderer.transition(function(selection) { + var duration = config.transitionDuration || 500; + + return selection + .transition() + .duration(duration); + }); + + var kg = this; + var _renderData = {}; + + var drawNodes = renderer.drawNodes(); + renderer.drawNodes(function(graph, element) { + var nodes = drawNodes(graph, element); + + // Add class labels + nodes.attr('id', function(d) { return d; }); + + // Add burger buns + drawHamburgers.call(kg, graph, nodes); + + _renderData.nodes = nodes; + return nodes; + }); + + var drawEdgePaths = renderer.drawEdgePaths(); + renderer.drawEdgePaths(function(graph, element) { + var edges = drawEdgePaths(graph, element); + _renderData.edges = edges; + return edges; + }); + + var postRender = renderer.postRender(); + renderer.postRender(function(graph, root) { + var result = postRender(graph, root); + kg.postEvent({ + type: 'renderGraph', + graph: kg.graph, + nodes: _renderData.nodes, + edges: _renderData.edges + }); + return result; + }); + + // Create the directed graph + var graph = createGraph(this, config.graph); + // Display the graph this.render(); From ff48fe56154ef4beed02c40226ed0b662c0c10af Mon Sep 17 00:00:00 2001 From: Daniel Buckmaster Date: Sun, 18 May 2014 18:21:39 +1000 Subject: [PATCH 2/2] Hacky hacky solution to edge deletion buttons. --- dist/knowledge-map-noD3.js | 209 +++++++++++++++++++++---------------- dist/knowledge-map.js | 209 +++++++++++++++++++++---------------- src/editing-plugin.js | 25 +++-- src/knowledge-map.js | 8 +- 4 files changed, 263 insertions(+), 188 deletions(-) diff --git a/dist/knowledge-map-noD3.js b/dist/knowledge-map-noD3.js index ebf447b..09f6616 100644 --- a/dist/knowledge-map-noD3.js +++ b/dist/knowledge-map-noD3.js @@ -5126,10 +5126,31 @@ function addConnectionEditing(graph, nodes) { return nodes; } +function addEdgeDeleteButtons(graph, edges, result) { + var kg = this; + edges.selectAll('circle.delete').remove(); + setTimeout(function() { + edges.append('circle') + .classed('delete', true) + .attr('r', 3) + .style('cursor', 'pointer') + .attr('cx', function(d) { + return result.edge(d).points[0].x; + }) + .attr('cy', function(d) { + return result.edge(d).points[0].y; + }) + .on('click', function(depID) { + kg.removeDependency({dependency: depID}); + }); + }, kg.config.transitionDuration || 500); +} + function setupEditing(kg) { kg.onEvent('renderGraph', function(e) { addConnectionEditing.call(kg, e.graph, e.nodes); addChangeableLabels.call(kg, e.graph, e.nodes); + addEdgeDeleteButtons.call(kg, e.graph, e.edges, e.result); }); }; @@ -5153,27 +5174,21 @@ will be rendered by dagre-d3. json: TODO describe what the json should look like */ -var createGraph = function(json) { - var graph = new dagreD3.Digraph(); +var createGraph = function(kg, json) { + var graph = kg.graph = new dagreD3.Digraph(); + if (!json) + return; - if (json && json.concepts) { + if (json.concepts) { // Add all the concepts as nodes json.concepts.forEach(function(concept) { - graph.addNode(concept.id, { - label: concept.name, - concept: concept, - }); + kg.addConcept({concept: concept}); }); - // Check each concept for dependencies and add them as edges - json.concepts.forEach(function(concept) { - if (Array.isArray(concept.dependencies)) { - concept.dependencies.forEach(function(dep) { - // Add an edge from the dependency to the concept with a null edge ID - graph.addEdge(dep+'-'+concept.id, dep, concept.id); - }); - } else { - // Dependencies is undefine/not an array and we'll figure out what to do with it later - } + } + + if (json.dependencies) { + json.dependencies.forEach(function(dep) { + kg.addDependency(dep); }); } @@ -5295,66 +5310,7 @@ Accepts a single object: */ var KnowledgeMap = function(api, config) { config = config || {}; - - // Create the directed graph - var graph = this.graph = createGraph(config.graph); - - // Create an element on the page for us to render our graph in - var parentName = config.inside || 'body'; - var element = this.element = d3.select(parentName).append('svg'); - - // Use dagre-d3 to render the graph - var renderer = this.renderer = new dagreD3.Renderer(); - var layout = this.layout = dagreD3.layout().rankSep(50); - if (config.layout) { - if (config.layout.verticalSpace) layout.rankSep(config.layout.verticalSpace); - if (config.layout.horizontalSpace) layout.nodeSep(config.layout.horizontalSpace); - if (config.layout.direction) layout.rankDir(config.layout.direction); - } - - // Update the way edges are positioned - renderer.layout(layout); - renderer.positionEdgePaths(positionEdgePaths); - - // Add transitions for graph updates - renderer.transition(function(selection) { - var duration; - if (config && config.transitionDuration !== undefined) { - duration = config.transitionDuration; - } else { - duration = 500; - } - - if (duration) { - return selection - .transition() - .duration(duration); - } else { - return selection; - } - }); - - // Add enter/exit circles - var kg = this; - var drawNodes = renderer.drawNodes(); - renderer.drawNodes(function(graph, element) { - var nodes = drawNodes(graph, element); - - // Add class labels - nodes.attr('id', function(d) { return d; }); - - // Add burger buns - drawHamburgers.call(kg, graph, nodes); - - // Add interactivity - kg.postEvent({ - type: 'renderGraph', - graph: graph, - nodes: nodes - }); - - return nodes; - }); + this.config = config; /* Message API @@ -5386,6 +5342,7 @@ var KnowledgeMap = function(api, config) { */ this.addConcept = function(config) { var kg = this; + window.kg = kg; // Add node to the graph this.graph.addNode(config.concept.id, { @@ -5438,7 +5395,7 @@ var KnowledgeMap = function(api, config) { } // Add the edge to the graph - this.graph.addEdge(dep+'-'+concept.id, dep, concept.id); + this.graph.addEdge(dep+'-'+concept.id, dep, concept.id, { dependency: config }); // Update the graph display this.render(); @@ -5450,20 +5407,28 @@ var KnowledgeMap = function(api, config) { */ this.removeDependency = function(config) { - // Get ids of concepts - var con = config.concept; - var dep = config.dependency; + if (config.concept) { + // Get ids of concepts + var con = config.concept; + var dep = config.dependency; + + // Remove the dependency from the concept + var concept = this.graph.node(con).concept; + if (concept.dependencies) { + var index = concept.dependencies.indexOf(dep); + concept.dependencies.splice(index, 1); + } - // Remove the dependency from the concept - var concept = this.graph.node(con).concept; - if (concept.dependencies) { - var index = concept.dependencies.indexOf(dep); - concept.dependencies.splice(index, 1); + // Remove the edge from the graph + this.graph.delEdge(dep+'-'+con); + } else { + var dep = this.graph.edge(config.dependency).dependency; + this.removeDependency({ + concept: dep.concept.id, + dependency: dep.dependency + }); } - // Remove the edge from the graph - this.graph.delEdge(dep+'-'+con); - // Update the graph display this.render(); }; @@ -5527,6 +5492,72 @@ var KnowledgeMap = function(api, config) { this.__defineSetter__('plugins', function() {}); } + // Create an element on the page for us to render our graph in + var parentName = config.inside || 'body'; + var element = this.element = d3.select(parentName).append('svg'); + + // Use dagre-d3 to render the graph + var renderer = this.renderer = new dagreD3.Renderer(); + var layout = this.layout = dagreD3.layout().rankSep(50); + if (config.layout) { + if (config.layout.verticalSpace) layout.rankSep(config.layout.verticalSpace); + if (config.layout.horizontalSpace) layout.nodeSep(config.layout.horizontalSpace); + if (config.layout.direction) layout.rankDir(config.layout.direction); + } + + // Update the way edges are positioned + renderer.layout(layout); + renderer.positionEdgePaths(positionEdgePaths); + + // Add transitions for graph updates + renderer.transition(function(selection) { + var duration = config.transitionDuration || 500; + + return selection + .transition() + .duration(duration); + }); + + var kg = this; + var _renderData = {}; + + var drawNodes = renderer.drawNodes(); + renderer.drawNodes(function(graph, element) { + var nodes = drawNodes(graph, element); + + // Add class labels + nodes.attr('id', function(d) { return d; }); + + // Add burger buns + drawHamburgers.call(kg, graph, nodes); + + _renderData.nodes = nodes; + return nodes; + }); + + var drawEdgePaths = renderer.drawEdgePaths(); + renderer.drawEdgePaths(function(graph, element) { + var edges = drawEdgePaths(graph, element); + _renderData.edges = edges; + return edges; + }); + + var postRender = renderer.postRender(); + renderer.postRender(function(result, root) { + var res = postRender(result, root); + kg.postEvent({ + type: 'renderGraph', + graph: kg.graph, + result: result, + nodes: _renderData.nodes, + edges: _renderData.edges + }); + return res; + }); + + // Create the directed graph + var graph = createGraph(this, config.graph); + // Display the graph this.render(); diff --git a/dist/knowledge-map.js b/dist/knowledge-map.js index 96a8704..8a3702d 100644 --- a/dist/knowledge-map.js +++ b/dist/knowledge-map.js @@ -14423,10 +14423,31 @@ function addConnectionEditing(graph, nodes) { return nodes; } +function addEdgeDeleteButtons(graph, edges, result) { + var kg = this; + edges.selectAll('circle.delete').remove(); + setTimeout(function() { + edges.append('circle') + .classed('delete', true) + .attr('r', 3) + .style('cursor', 'pointer') + .attr('cx', function(d) { + return result.edge(d).points[0].x; + }) + .attr('cy', function(d) { + return result.edge(d).points[0].y; + }) + .on('click', function(depID) { + kg.removeDependency({dependency: depID}); + }); + }, kg.config.transitionDuration || 500); +} + function setupEditing(kg) { kg.onEvent('renderGraph', function(e) { addConnectionEditing.call(kg, e.graph, e.nodes); addChangeableLabels.call(kg, e.graph, e.nodes); + addEdgeDeleteButtons.call(kg, e.graph, e.edges, e.result); }); }; @@ -14450,27 +14471,21 @@ will be rendered by dagre-d3. json: TODO describe what the json should look like */ -var createGraph = function(json) { - var graph = new dagreD3.Digraph(); +var createGraph = function(kg, json) { + var graph = kg.graph = new dagreD3.Digraph(); + if (!json) + return; - if (json && json.concepts) { + if (json.concepts) { // Add all the concepts as nodes json.concepts.forEach(function(concept) { - graph.addNode(concept.id, { - label: concept.name, - concept: concept, - }); + kg.addConcept({concept: concept}); }); - // Check each concept for dependencies and add them as edges - json.concepts.forEach(function(concept) { - if (Array.isArray(concept.dependencies)) { - concept.dependencies.forEach(function(dep) { - // Add an edge from the dependency to the concept with a null edge ID - graph.addEdge(dep+'-'+concept.id, dep, concept.id); - }); - } else { - // Dependencies is undefine/not an array and we'll figure out what to do with it later - } + } + + if (json.dependencies) { + json.dependencies.forEach(function(dep) { + kg.addDependency(dep); }); } @@ -14592,66 +14607,7 @@ Accepts a single object: */ var KnowledgeMap = function(api, config) { config = config || {}; - - // Create the directed graph - var graph = this.graph = createGraph(config.graph); - - // Create an element on the page for us to render our graph in - var parentName = config.inside || 'body'; - var element = this.element = d3.select(parentName).append('svg'); - - // Use dagre-d3 to render the graph - var renderer = this.renderer = new dagreD3.Renderer(); - var layout = this.layout = dagreD3.layout().rankSep(50); - if (config.layout) { - if (config.layout.verticalSpace) layout.rankSep(config.layout.verticalSpace); - if (config.layout.horizontalSpace) layout.nodeSep(config.layout.horizontalSpace); - if (config.layout.direction) layout.rankDir(config.layout.direction); - } - - // Update the way edges are positioned - renderer.layout(layout); - renderer.positionEdgePaths(positionEdgePaths); - - // Add transitions for graph updates - renderer.transition(function(selection) { - var duration; - if (config && config.transitionDuration !== undefined) { - duration = config.transitionDuration; - } else { - duration = 500; - } - - if (duration) { - return selection - .transition() - .duration(duration); - } else { - return selection; - } - }); - - // Add enter/exit circles - var kg = this; - var drawNodes = renderer.drawNodes(); - renderer.drawNodes(function(graph, element) { - var nodes = drawNodes(graph, element); - - // Add class labels - nodes.attr('id', function(d) { return d; }); - - // Add burger buns - drawHamburgers.call(kg, graph, nodes); - - // Add interactivity - kg.postEvent({ - type: 'renderGraph', - graph: graph, - nodes: nodes - }); - - return nodes; - }); + this.config = config; /* Message API @@ -14683,6 +14639,7 @@ var KnowledgeMap = function(api, config) { */ this.addConcept = function(config) { var kg = this; + window.kg = kg; // Add node to the graph this.graph.addNode(config.concept.id, { @@ -14735,7 +14692,7 @@ var KnowledgeMap = function(api, config) { } // Add the edge to the graph - this.graph.addEdge(dep+'-'+concept.id, dep, concept.id); + this.graph.addEdge(dep+'-'+concept.id, dep, concept.id, { dependency: config }); // Update the graph display this.render(); @@ -14747,19 +14704,27 @@ var KnowledgeMap = function(api, config) { */ this.removeDependency = function(config) { - // Get ids of concepts - var con = config.concept; - var dep = config.dependency; + if (config.concept) { + // Get ids of concepts + var con = config.concept; + var dep = config.dependency; - // Remove the dependency from the concept - var concept = this.graph.node(con).concept; - if (concept.dependencies) { - var index = concept.dependencies.indexOf(dep); - concept.dependencies.splice(index, 1); - } + // Remove the dependency from the concept + var concept = this.graph.node(con).concept; + if (concept.dependencies) { + var index = concept.dependencies.indexOf(dep); + concept.dependencies.splice(index, 1); + } - // Remove the edge from the graph - this.graph.delEdge(dep+'-'+con); + // Remove the edge from the graph + this.graph.delEdge(dep+'-'+con); + } else { + var dep = this.graph.edge(config.dependency).dependency; + this.removeDependency({ + concept: dep.concept.id, + dependency: dep.dependency + }); + } // Update the graph display this.render(); @@ -14824,6 +14789,72 @@ var KnowledgeMap = function(api, config) { this.__defineSetter__('plugins', function() {}); } + // Create an element on the page for us to render our graph in + var parentName = config.inside || 'body'; + var element = this.element = d3.select(parentName).append('svg'); + + // Use dagre-d3 to render the graph + var renderer = this.renderer = new dagreD3.Renderer(); + var layout = this.layout = dagreD3.layout().rankSep(50); + if (config.layout) { + if (config.layout.verticalSpace) layout.rankSep(config.layout.verticalSpace); + if (config.layout.horizontalSpace) layout.nodeSep(config.layout.horizontalSpace); + if (config.layout.direction) layout.rankDir(config.layout.direction); + } + + // Update the way edges are positioned + renderer.layout(layout); + renderer.positionEdgePaths(positionEdgePaths); + + // Add transitions for graph updates + renderer.transition(function(selection) { + var duration = config.transitionDuration || 500; + + return selection + .transition() + .duration(duration); + }); + + var kg = this; + var _renderData = {}; + + var drawNodes = renderer.drawNodes(); + renderer.drawNodes(function(graph, element) { + var nodes = drawNodes(graph, element); + + // Add class labels + nodes.attr('id', function(d) { return d; }); + + // Add burger buns + drawHamburgers.call(kg, graph, nodes); + + _renderData.nodes = nodes; + return nodes; + }); + + var drawEdgePaths = renderer.drawEdgePaths(); + renderer.drawEdgePaths(function(graph, element) { + var edges = drawEdgePaths(graph, element); + _renderData.edges = edges; + return edges; + }); + + var postRender = renderer.postRender(); + renderer.postRender(function(result, root) { + var res = postRender(result, root); + kg.postEvent({ + type: 'renderGraph', + graph: kg.graph, + result: result, + nodes: _renderData.nodes, + edges: _renderData.edges + }); + return res; + }); + + // Create the directed graph + var graph = createGraph(this, config.graph); + // Display the graph this.render(); diff --git a/src/editing-plugin.js b/src/editing-plugin.js index 41c0d23..5e86736 100644 --- a/src/editing-plugin.js +++ b/src/editing-plugin.js @@ -149,20 +149,31 @@ function addConnectionEditing(graph, nodes) { return nodes; } -function addEdgeDeleteButtons(graph, edges) { +function addEdgeDeleteButtons(graph, edges, result) { var kg = this; - edges.select('path') - .style('cursor', 'pointer') - .on('click', function(depID) { - kg.removeDependency({dependency: depID}); - }); + edges.selectAll('circle.delete').remove(); + setTimeout(function() { + edges.append('circle') + .classed('delete', true) + .attr('r', 3) + .style('cursor', 'pointer') + .attr('cx', function(d) { + return result.edge(d).points[0].x; + }) + .attr('cy', function(d) { + return result.edge(d).points[0].y; + }) + .on('click', function(depID) { + kg.removeDependency({dependency: depID}); + }); + }, kg.config.transitionDuration || 500); } function setupEditing(kg) { kg.onEvent('renderGraph', function(e) { addConnectionEditing.call(kg, e.graph, e.nodes); addChangeableLabels.call(kg, e.graph, e.nodes); - addEdgeDeleteButtons.call(kg, e.graph, e.edges); + addEdgeDeleteButtons.call(kg, e.graph, e.edges, e.result); }); }; diff --git a/src/knowledge-map.js b/src/knowledge-map.js index 1b5e590..10cc8ec 100644 --- a/src/knowledge-map.js +++ b/src/knowledge-map.js @@ -147,6 +147,7 @@ Accepts a single object: */ var KnowledgeMap = function(api, config) { config = config || {}; + this.config = config; /* Message API @@ -379,15 +380,16 @@ var KnowledgeMap = function(api, config) { }); var postRender = renderer.postRender(); - renderer.postRender(function(graph, root) { - var result = postRender(graph, root); + renderer.postRender(function(result, root) { + var res = postRender(result, root); kg.postEvent({ type: 'renderGraph', graph: kg.graph, + result: result, nodes: _renderData.nodes, edges: _renderData.edges }); - return result; + return res; }); // Create the directed graph