Skip to content

graphically editable graph feature added #262

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

graphically editable graph feature added #262

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
509528c
editable graph feature added
azizHakim Nov 12, 2023
e9916f7
editable graph feature added
azizHakim Nov 12, 2023
c7a0434
editable graph feature added
azizHakim Nov 12, 2023
cd19fb7
Delete lib directory
azizHakim Nov 12, 2023
8b76bf1
test added for editable graph feature
azizHakim Dec 3, 2023
04e4556
test added for editable graph feature
azizHakim Dec 3, 2023
fd47e5e
Merge branch 'feature/editable-graph' of github.com:azizHakim/pyvis i…
azizHakim Dec 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,3 +47,17 @@ g.show("basic.html")

## Interactive Notebook playground with examples
[![Binder](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/WestHealth/pyvis/master?filepath=notebooks%2Fexample.ipynb)

## Editable Graph
For options to visually edit the graph, add `editable=True` while creating the Network. There is a download option to save the modified graph. Download will not work in notebook instances.

```python
from pyvis.network import Network

g = Network( editable=True)
g.add_node(0)
g.add_node(1)
g.add_edge(0, 1)

g.show("example_editable_graph.html", notebook=False)
```
7 changes: 5 additions & 2 deletions pyvis/network.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,8 @@ def __init__(self,
font_color=False,
layout=None,
heading="",
cdn_resources="local"):
cdn_resources="local",
editable=False):
"""
:param height: The height of the canvas
:param width: The width of the canvas
Expand Down Expand Up @@ -88,6 +89,7 @@ def __init__(self,
self.neighborhood_highlight = neighborhood_highlight
self.select_menu = select_menu
self.filter_menu = filter_menu
self.editable = editable
assert cdn_resources in ["local", "in_line", "remote"], "cdn_resources not in [local, in_line, remote]."
# path is the root template located in the template_dir
self.path = "template.html"
Expand Down Expand Up @@ -493,7 +495,8 @@ def generate_html(self, name="index.html", local=True, notebook=False):
select_menu=self.select_menu,
filter_menu=self.filter_menu,
notebook=notebook,
cdn_resources=self.cdn_resources
cdn_resources=self.cdn_resources,
editable=self.editable
)
return self.html

Expand Down
240 changes: 240 additions & 0 deletions pyvis/templates/template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,62 @@ <h1>{{heading}}</h1>
</center>
<style type="text/css">

{% if editable %}
table.legend_table {
font-size: 11px;
border-width: 1px;
border-color: #d3d3d3;
border-style: solid;
}
table.legend_table,
td {
border-width: 1px;
border-color: #d3d3d3;
border-style: solid;
padding: 2px;
}
div.table_content {
width: 80px;
text-align: center;
}
div.table_description {
width: 100px;
}

#operation {
font-size: 28px;
}
#node-popUp {
display: none;
position: absolute;
top: 350px;
left: 170px;
z-index: 299;
width: 350px;
height: 150px;
background-color: #f9f9f9;
border-style: solid;
border-width: 3px;
border-color: #5394ed;
padding: 10px;
text-align: center;
}
#edge-popUp {
display: none;
position: absolute;
top: 350px;
left: 170px;
z-index: 299;
width: 350px;
height: 120px;
background-color: #f9f9f9;
border-style: solid;
border-width: 3px;
border-color: #5394ed;
padding: 10px;
text-align: center;
}
{% endif %}
#mynetwork {
width: {{width}};
height: {{height}};
Expand Down Expand Up @@ -236,9 +292,50 @@ <h1>{{heading}}</h1>
</div>
</div>
{% endif %}

{% if editable %}
<div id="node-popUp">
<span id="node-operation">node</span> <br />
<table style="margin: auto">
<tbody>
<tr>
<td>id</td>
<td><input id="node-id" value="new value" /></td>
</tr>
<tr>
<td>label</td>
<td><input id="node-label" value="new value" /></td>
</tr>
</tbody>
</table>
<input type="button" value="save" id="node-saveButton" />
<input type="button" value="cancel" id="node-cancelButton" />
</div>

<div id="edge-popUp">
<span id="edge-operation">edge</span> <br />
<table style="margin: auto">
<tbody>
<tr>
<td>label</td>
<td><input id="edge-label" value="new value" /></td>
</tr>
</tbody>
</table>
<input type="button" value="save" id="edge-saveButton" />
<input type="button" value="cancel" id="edge-cancelButton" />
</div>
{% endif %}

<div id="mynetwork" class="card-body"></div>
</div>

{% if (editable and not notebook) %}
<div class="text-center" style="padding:10px">
<button type="button" class="btn btn-primary btn-block" onclick="downloadGraph()">Download Graph Data</button>
</div>
{% endif %}

{% if nodes|length > 100 and physics_enabled %}
<div id="loadingBar">
<div class="outerBorder">
Expand Down Expand Up @@ -409,6 +506,96 @@ <h1>{{heading}}</h1>

{% endif %}

{% if editable %}
function downloadGraph() {
const nodeIdsAndLabels = nodes.map(node => ({ id: node.id, label: node.label }));
const edgeIdsAndLabels = edges.map(edge => ({ from: edge.from, to: edge.to, id: edge.id, label: edge.label }));
const graphData = {
nodes : nodeIdsAndLabels,
edges : edgeIdsAndLabels
}
// Convert the graphData to a JSON string
const jsonData = JSON.stringify(graphData, null, 2);

// Create a Blob with the JSON data
const blob = new Blob([jsonData], { type: 'application/json' });

// Create an anchor element to trigger the download
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = "graphData.json";

// Trigger a click event on the anchor element to initiate the download
a.click();

// Clean up by revoking the Blob URL
URL.revokeObjectURL(a.href);
getData()
}

function editNode(data, cancelAction, callback) {
document.getElementById("node-label").value = data.label;
document.getElementById("node-saveButton").onclick = saveNodeData.bind(
this,
data,
callback
);
document.getElementById("node-cancelButton").onclick =
cancelAction.bind(this, callback);
document.getElementById("node-popUp").style.display = "block";
}

// Callback passed as parameter is ignored
function clearNodePopUp() {
document.getElementById("node-saveButton").onclick = null;
document.getElementById("node-cancelButton").onclick = null;
document.getElementById("node-popUp").style.display = "none";
}

function cancelNodeEdit(callback) {
clearNodePopUp();
callback(null);
}

function saveNodeData(data, callback) {
data.label = document.getElementById("node-label").value;
clearNodePopUp();
callback(data);
}

function editEdgeWithoutDrag(data, callback) {
// filling in the popup DOM elements
document.getElementById("edge-label").value = data.label;
document.getElementById("edge-saveButton").onclick = saveEdgeData.bind(
this,
data,
callback
);
document.getElementById("edge-cancelButton").onclick =
cancelEdgeEdit.bind(this, callback);
document.getElementById("edge-popUp").style.display = "block";
}

function clearEdgePopUp() {
document.getElementById("edge-saveButton").onclick = null;
document.getElementById("edge-cancelButton").onclick = null;
document.getElementById("edge-popUp").style.display = "none";
}

function cancelEdgeEdit(callback) {
clearEdgePopUp();
callback(null);
}

function saveEdgeData(data, callback) {
if (typeof data.to === "object") data.to = data.to.id;
if (typeof data.from === "object") data.from = data.from.id;
data.label = document.getElementById("edge-label").value;
clearEdgePopUp();
callback(data);
}
{% endif %}

// This method is responsible for drawing the graph, returns the drawn network
function drawGraph() {
var container = document.getElementById('mynetwork');
Expand All @@ -424,6 +611,33 @@ <h1>{{heading}}</h1>
}

var options = parsedData.options;

{% if editable %}
options.manipulation = {
addNode: function (data, callback) {
// filling in the popup DOM elements
document.getElementById("node-operation").innerText = "Add Node";
editNode(data, clearNodePopUp, callback);
},
editNode: function (data, callback) {
// filling in the popup DOM elements
document.getElementById("node-operation").innerText = "Edit Node";
editNode(data, cancelNodeEdit, callback);
},
addEdge: function (data, callback) {
document.getElementById("edge-operation").innerText = "Add Edge";
editEdgeWithoutDrag(data, callback);
},
editEdge: {
editWithoutDrag: function (data, callback) {
document.getElementById("edge-operation").innerText =
"Edit Edge";
editEdgeWithoutDrag(data, callback);
},
},
};
{% endif %}

options.nodes = {
shape: "dot"
}
Expand All @@ -445,6 +659,32 @@ <h1>{{heading}}</h1>

var options = {{options|safe}};

{% if editable %}
options.manipulation = {
addNode: function (data, callback) {
// filling in the popup DOM elements
document.getElementById("node-operation").innerText = "Add Node";
editNode(data, clearNodePopUp, callback);
},
editNode: function (data, callback) {
// filling in the popup DOM elements
document.getElementById("node-operation").innerText = "Edit Node";
editNode(data, cancelNodeEdit, callback);
},
addEdge: function (data, callback) {
document.getElementById("edge-operation").innerText = "Add Edge";
editEdgeWithoutDrag(data, callback);
},
editEdge: {
editWithoutDrag: function (data, callback) {
document.getElementById("edge-operation").innerText =
"Edit Edge";
editEdgeWithoutDrag(data, callback);
},
},
};
{% endif %}

{% endif %}


Expand Down
55 changes: 54 additions & 1 deletion pyvis/tests/test_html.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
from webdriver_manager.chrome import ChromeDriverManager
from selenium.webdriver.support.select import Select

from ..network import Network
from pyvis.network import Network


class GraphTests(unittest.TestCase):
Expand Down Expand Up @@ -199,3 +199,56 @@ def test_graph(self):
driver.quit()
if os.path.exists("./" + file_name):
os.remove("./" + file_name)


class EditMenuTest(unittest.TestCase):
service = ChromeService(executable_path=ChromeDriverManager().install())

def setUp(self):
self.g = Network(filter_menu=True, select_menu=True, editable=True)

def test_graph(self):
# create simple network and save it in a file
self.g.add_nodes([1, 2, 3],
value=[10, 100, 400],
title=["I am node 1", "node 2 here", "and im node 3"],
x=[21.4, 21.4, 21.4], y=[100.2, 223.54, 32.1],
label=["NODE 1", "NODE 2", "NODE 3"],
color=["#00ff1e", "#162347", "#dd4b39"])
file_name = "EditMenuTest.html"
self.g.show(file_name, notebook=False)

# get the saved file path and change it into required format for the driver to read it
file_path = os.getcwd()
file_path = "file:///" + file_path.replace(os.sep, '/') + "/" + file_name

# start the web driver, load the file and wait for a few seconds in precaution
driver = webdriver.Chrome(service=self.service)
driver.get(file_path)
driver.implicitly_wait(0.1)

# test for the main html container and then canvas
self.assertIsNotNone(driver.find_element(By.ID, "mynetwork"))
self.assertIsNotNone(driver.find_element(By.TAG_NAME, "canvas"))

self.assertIsNotNone(driver.find_element(By.ID, "node-popUp"))
self.assertIsNotNone(driver.find_element(By.ID, "node-operation"))
self.assertIsNotNone(driver.find_element(By.ID, "node-label"))
self.assertIsNotNone(driver.find_element(By.ID, "node-saveButton"))
self.assertIsNotNone(driver.find_element(By.ID, "node-cancelButton"))

self.assertIsNotNone(driver.find_element(By.ID, "edge-popUp"))
self.assertIsNotNone(driver.find_element(By.ID, "edge-operation"))
self.assertIsNotNone(driver.find_element(By.ID, "edge-label"))
self.assertIsNotNone(driver.find_element(By.ID, "edge-saveButton"))
self.assertIsNotNone(driver.find_element(By.ID, "edge-cancelButton"))
self.assertIsNotNone(driver.find_element(By.ID, "edge-label"))
self.assertIsNotNone(driver.find_element(By.ID, "edge-label"))
self.assertIsNotNone(driver.find_element(By.ID, "edge-label"))
self.assertIsNotNone(driver.find_element(By.ID, "edge-label"))
self.assertIsNotNone(driver.find_element(By.ID, "edge-label"))

# close the driver and delete the testing file
driver.quit()
if os.path.exists("./" + file_name):
os.remove("./" + file_name)