Skip to content

Commit

Permalink
2nd /bindings -> vis-9.1.2
Browse files Browse the repository at this point in the history
  • Loading branch information
BerserkerGaruk committed Feb 6, 2023
1 parent 5fbe88d commit 58a3b67
Show file tree
Hide file tree
Showing 9 changed files with 966 additions and 20 deletions.
93 changes: 80 additions & 13 deletions notebooks/example.ipynb
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
" "
],
"text/plain": [
"<IPython.lib.display.IFrame at 0x7f0ecc790ee0>"
"<IPython.lib.display.IFrame at 0x7fcd4c1a3d60>"
]
},
"execution_count": 2,
Expand Down Expand Up @@ -112,7 +112,7 @@
" "
],
"text/plain": [
"<IPython.lib.display.IFrame at 0x7f0e7c5d7f10>"
"<IPython.lib.display.IFrame at 0x7fcd4c147d60>"
]
},
"execution_count": 3,
Expand Down Expand Up @@ -212,7 +212,7 @@
" "
],
"text/plain": [
"<IPython.lib.display.IFrame at 0x7f0ecc651df0>"
"<IPython.lib.display.IFrame at 0x7fcd4c1a3af0>"
]
},
"execution_count": 5,
Expand Down Expand Up @@ -268,7 +268,7 @@
" "
],
"text/plain": [
"<IPython.lib.display.IFrame at 0x7f0e7c6208b0>"
"<IPython.lib.display.IFrame at 0x7fcd4c1a3820>"
]
},
"execution_count": 6,
Expand Down Expand Up @@ -323,7 +323,7 @@
" "
],
"text/plain": [
"<IPython.lib.display.IFrame at 0x7f0e7c62c250>"
"<IPython.lib.display.IFrame at 0x7fcd4c6dc3d0>"
]
},
"execution_count": 7,
Expand Down Expand Up @@ -393,7 +393,7 @@
" "
],
"text/plain": [
"<IPython.lib.display.IFrame at 0x7f0ecc790fd0>"
"<IPython.lib.display.IFrame at 0x7fccfa516bb0>"
]
},
"execution_count": 8,
Expand Down Expand Up @@ -450,21 +450,51 @@
},
{
"cell_type": "code",
"execution_count": null,
"execution_count": 9,
"metadata": {
"pycharm": {
"name": "#%%\n"
}
},
"outputs": [],
"outputs": [
{
"name": "stdout",
"output_type": "stream",
"text": [
"example6.html\n"
]
},
{
"data": {
"text/html": [
"\n",
" <iframe\n",
" width=\"100%\"\n",
" height=\"750px\"\n",
" src=\"example6.html\"\n",
" frameborder=\"0\"\n",
" allowfullscreen\n",
" \n",
" ></iframe>\n",
" "
],
"text/plain": [
"<IPython.lib.display.IFrame at 0x7fcd2403f280>"
]
},
"execution_count": 9,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"got_net.show_buttons(filter_=\"physics\")\n",
"got_net.show(\"example6.html\")"
]
},
{
"cell_type": "code",
"execution_count": null,
"execution_count": 10,
"metadata": {
"pycharm": {
"name": "#%%\n"
Expand Down Expand Up @@ -499,7 +529,7 @@
},
{
"cell_type": "code",
"execution_count": null,
"execution_count": 11,
"metadata": {
"pycharm": {
"name": "#%%\n"
Expand All @@ -512,13 +542,43 @@
},
{
"cell_type": "code",
"execution_count": null,
"execution_count": 12,
"metadata": {
"pycharm": {
"name": "#%%\n"
}
},
"outputs": [],
"outputs": [
{
"name": "stdout",
"output_type": "stream",
"text": [
"nx.html\n"
]
},
{
"data": {
"text/html": [
"\n",
" <iframe\n",
" width=\"100%\"\n",
" height=\"750px\"\n",
" src=\"nx.html\"\n",
" frameborder=\"0\"\n",
" allowfullscreen\n",
" \n",
" ></iframe>\n",
" "
],
"text/plain": [
"<IPython.lib.display.IFrame at 0x7fccfc4d9e80>"
]
},
"execution_count": 12,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"nx_graph = nx.cycle_graph(10)\n",
"nx_graph.nodes[1]['title'] = 'Number 1'\n",
Expand All @@ -538,7 +598,7 @@
},
{
"cell_type": "code",
"execution_count": null,
"execution_count": 13,
"metadata": {
"pycharm": {
"name": "#%%\n"
Expand All @@ -559,6 +619,13 @@
},
"outputs": [],
"source": []
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": []
}
],
"metadata": {
Expand Down
4 changes: 2 additions & 2 deletions notebooks/example2.html
Original file line number Diff line number Diff line change
Expand Up @@ -302,8 +302,8 @@ <h1></h1>


// parsing and collecting nodes and edges from the python
nodes = new vis.DataSet([{"color": "#97c2fc", "id": 0, "label": 0, "shape": "dot"}, {"color": "#97c2fc", "id": 1, "label": 1, "shape": "dot"}, {"color": "#97c2fc", "id": 2, "label": 2, "shape": "dot"}, {"color": "#97c2fc", "id": 3, "label": 3, "shape": "dot"}, {"color": "#97c2fc", "id": 4, "label": 4, "shape": "dot"}, {"color": "#97c2fc", "id": 8, "label": 8, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 12, "label": 12, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 9, "label": 9, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 15, "label": 15, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 11, "label": 11, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 17, "label": 17, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 6, "label": 6, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 5, "label": 5, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 13, "label": 13, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 10, "label": 10, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 14, "label": 14, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 16, "label": 16, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 7, "label": 7, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 19, "label": 19, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 18, "label": 18, "shape": "dot", "size": 10}]);
edges = new vis.DataSet([{"from": 0, "to": 2}, {"from": 0, "to": 3}, {"from": 0, "to": 4}, {"from": 1, "to": 1}, {"from": 1, "to": 3}, {"from": 1, "to": 2}, {"from": 1, "to": 8, "width": 1}, {"from": 1, "to": 12, "width": 1}, {"from": 1, "to": 9, "width": 1}, {"from": 2, "to": 15, "width": 1}, {"from": 2, "to": 11, "width": 1}, {"from": 2, "to": 17, "width": 1}, {"from": 3, "to": 11, "width": 1}, {"from": 4, "to": 6, "width": 1}, {"from": 5, "to": 13, "width": 1}, {"from": 5, "to": 10, "width": 1}, {"from": 5, "to": 14, "width": 1}, {"from": 6, "to": 16, "width": 1}, {"from": 6, "to": 11, "width": 1}, {"from": 7, "to": 17, "width": 1}, {"from": 7, "to": 10, "width": 1}, {"from": 9, "to": 16, "width": 1}, {"from": 14, "to": 19, "width": 1}, {"from": 16, "to": 18, "width": 1}]);
nodes = new vis.DataSet([{"color": "#97c2fc", "id": 0, "label": 0, "shape": "dot"}, {"color": "#97c2fc", "id": 1, "label": 1, "shape": "dot"}, {"color": "#97c2fc", "id": 2, "label": 2, "shape": "dot"}, {"color": "#97c2fc", "id": 3, "label": 3, "shape": "dot"}, {"color": "#97c2fc", "id": 4, "label": 4, "shape": "dot"}, {"color": "#97c2fc", "id": 12, "label": 12, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 8, "label": 8, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 7, "label": 7, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 6, "label": 6, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 9, "label": 9, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 5, "label": 5, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 11, "label": 11, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 19, "label": 19, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 17, "label": 17, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 10, "label": 10, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 13, "label": 13, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 16, "label": 16, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 15, "label": 15, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 14, "label": 14, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 18, "label": 18, "shape": "dot", "size": 10}]);
edges = new vis.DataSet([{"from": 0, "to": 2}, {"from": 0, "to": 3}, {"from": 0, "to": 4}, {"from": 1, "to": 1}, {"from": 1, "to": 3}, {"from": 1, "to": 2}, {"from": 0, "to": 12, "width": 1}, {"from": 0, "to": 8, "width": 1}, {"from": 1, "to": 7, "width": 1}, {"from": 1, "to": 6, "width": 1}, {"from": 2, "to": 9, "width": 1}, {"from": 4, "to": 8, "width": 1}, {"from": 5, "to": 11, "width": 1}, {"from": 6, "to": 8, "width": 1}, {"from": 8, "to": 9, "width": 1}, {"from": 8, "to": 19, "width": 1}, {"from": 9, "to": 17, "width": 1}, {"from": 10, "to": 13, "width": 1}, {"from": 11, "to": 16, "width": 1}, {"from": 11, "to": 17, "width": 1}, {"from": 12, "to": 15, "width": 1}, {"from": 13, "to": 14, "width": 1}, {"from": 13, "to": 19, "width": 1}, {"from": 18, "to": 19, "width": 1}]);

nodeColors = {};
allNodes = nodes.get({ returnType: "Object" });
Expand Down
4 changes: 2 additions & 2 deletions notebooks/example3.html
Original file line number Diff line number Diff line change
Expand Up @@ -302,8 +302,8 @@ <h1></h1>


// parsing and collecting nodes and edges from the python
nodes = new vis.DataSet([{"color": "#97c2fc", "id": 0, "label": 0, "shape": "dot"}, {"color": "#97c2fc", "id": 1, "label": 1, "shape": "dot"}, {"color": "#97c2fc", "id": 2, "label": 2, "shape": "dot"}, {"color": "#97c2fc", "id": 3, "label": 3, "shape": "dot"}, {"color": "#97c2fc", "id": 4, "label": 4, "shape": "dot"}, {"color": "#97c2fc", "id": 8, "label": 8, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 12, "label": 12, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 9, "label": 9, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 15, "label": 15, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 11, "label": 11, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 17, "label": 17, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 6, "label": 6, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 5, "label": 5, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 13, "label": 13, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 10, "label": 10, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 14, "label": 14, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 16, "label": 16, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 7, "label": 7, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 19, "label": 19, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 18, "label": 18, "shape": "dot", "size": 10}]);
edges = new vis.DataSet([{"from": 0, "to": 2}, {"from": 0, "to": 3}, {"from": 0, "to": 4}, {"from": 1, "to": 1}, {"from": 1, "to": 3}, {"from": 1, "to": 2}, {"from": 1, "to": 8, "width": 1}, {"from": 1, "to": 12, "width": 1}, {"from": 1, "to": 9, "width": 1}, {"from": 2, "to": 15, "width": 1}, {"from": 2, "to": 11, "width": 1}, {"from": 2, "to": 17, "width": 1}, {"from": 3, "to": 11, "width": 1}, {"from": 4, "to": 6, "width": 1}, {"from": 5, "to": 13, "width": 1}, {"from": 5, "to": 10, "width": 1}, {"from": 5, "to": 14, "width": 1}, {"from": 6, "to": 16, "width": 1}, {"from": 6, "to": 11, "width": 1}, {"from": 7, "to": 17, "width": 1}, {"from": 7, "to": 10, "width": 1}, {"from": 9, "to": 16, "width": 1}, {"from": 14, "to": 19, "width": 1}, {"from": 16, "to": 18, "width": 1}]);
nodes = new vis.DataSet([{"color": "#97c2fc", "id": 0, "label": 0, "shape": "dot"}, {"color": "#97c2fc", "id": 1, "label": 1, "shape": "dot"}, {"color": "#97c2fc", "id": 2, "label": 2, "shape": "dot"}, {"color": "#97c2fc", "id": 3, "label": 3, "shape": "dot"}, {"color": "#97c2fc", "id": 4, "label": 4, "shape": "dot"}, {"color": "#97c2fc", "id": 12, "label": 12, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 8, "label": 8, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 7, "label": 7, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 6, "label": 6, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 9, "label": 9, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 5, "label": 5, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 11, "label": 11, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 19, "label": 19, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 17, "label": 17, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 10, "label": 10, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 13, "label": 13, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 16, "label": 16, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 15, "label": 15, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 14, "label": 14, "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": 18, "label": 18, "shape": "dot", "size": 10}]);
edges = new vis.DataSet([{"from": 0, "to": 2}, {"from": 0, "to": 3}, {"from": 0, "to": 4}, {"from": 1, "to": 1}, {"from": 1, "to": 3}, {"from": 1, "to": 2}, {"from": 0, "to": 12, "width": 1}, {"from": 0, "to": 8, "width": 1}, {"from": 1, "to": 7, "width": 1}, {"from": 1, "to": 6, "width": 1}, {"from": 2, "to": 9, "width": 1}, {"from": 4, "to": 8, "width": 1}, {"from": 5, "to": 11, "width": 1}, {"from": 6, "to": 8, "width": 1}, {"from": 8, "to": 9, "width": 1}, {"from": 8, "to": 19, "width": 1}, {"from": 9, "to": 17, "width": 1}, {"from": 10, "to": 13, "width": 1}, {"from": 11, "to": 16, "width": 1}, {"from": 11, "to": 17, "width": 1}, {"from": 12, "to": 15, "width": 1}, {"from": 13, "to": 14, "width": 1}, {"from": 13, "to": 19, "width": 1}, {"from": 18, "to": 19, "width": 1}]);

nodeColors = {};
allNodes = nodes.get({ returnType: "Object" });
Expand Down
2 changes: 1 addition & 1 deletion notebooks/example5.html

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion notebooks/example6.html

Large diffs are not rendered by default.

189 changes: 189 additions & 0 deletions notebooks/lib/bindings/utils.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,189 @@
function neighbourhoodHighlight(params) {
// console.log("in nieghbourhoodhighlight");
allNodes = nodes.get({ returnType: "Object" });
// originalNodes = JSON.parse(JSON.stringify(allNodes));
// if something is selected:
if (params.nodes.length > 0) {
highlightActive = true;
var i, j;
var selectedNode = params.nodes[0];
var degrees = 2;

// mark all nodes as hard to read.
for (let nodeId in allNodes) {
// nodeColors[nodeId] = allNodes[nodeId].color;
allNodes[nodeId].color = "rgba(200,200,200,0.5)";
if (allNodes[nodeId].hiddenLabel === undefined) {
allNodes[nodeId].hiddenLabel = allNodes[nodeId].label;
allNodes[nodeId].label = undefined;
}
}
var connectedNodes = network.getConnectedNodes(selectedNode);
var allConnectedNodes = [];

// get the second degree nodes
for (i = 1; i < degrees; i++) {
for (j = 0; j < connectedNodes.length; j++) {
allConnectedNodes = allConnectedNodes.concat(
network.getConnectedNodes(connectedNodes[j])
);
}
}

// all second degree nodes get a different color and their label back
for (i = 0; i < allConnectedNodes.length; i++) {
// allNodes[allConnectedNodes[i]].color = "pink";
allNodes[allConnectedNodes[i]].color = "rgba(150,150,150,0.75)";
if (allNodes[allConnectedNodes[i]].hiddenLabel !== undefined) {
allNodes[allConnectedNodes[i]].label =
allNodes[allConnectedNodes[i]].hiddenLabel;
allNodes[allConnectedNodes[i]].hiddenLabel = undefined;
}
}

// all first degree nodes get their own color and their label back
for (i = 0; i < connectedNodes.length; i++) {
// allNodes[connectedNodes[i]].color = undefined;
allNodes[connectedNodes[i]].color = nodeColors[connectedNodes[i]];
if (allNodes[connectedNodes[i]].hiddenLabel !== undefined) {
allNodes[connectedNodes[i]].label =
allNodes[connectedNodes[i]].hiddenLabel;
allNodes[connectedNodes[i]].hiddenLabel = undefined;
}
}

// the main node gets its own color and its label back.
// allNodes[selectedNode].color = undefined;
allNodes[selectedNode].color = nodeColors[selectedNode];
if (allNodes[selectedNode].hiddenLabel !== undefined) {
allNodes[selectedNode].label = allNodes[selectedNode].hiddenLabel;
allNodes[selectedNode].hiddenLabel = undefined;
}
} else if (highlightActive === true) {
// console.log("highlightActive was true");
// reset all nodes
for (let nodeId in allNodes) {
// allNodes[nodeId].color = "purple";
allNodes[nodeId].color = nodeColors[nodeId];
// delete allNodes[nodeId].color;
if (allNodes[nodeId].hiddenLabel !== undefined) {
allNodes[nodeId].label = allNodes[nodeId].hiddenLabel;
allNodes[nodeId].hiddenLabel = undefined;
}
}
highlightActive = false;
}

// transform the object into an array
var updateArray = [];
if (params.nodes.length > 0) {
for (let nodeId in allNodes) {
if (allNodes.hasOwnProperty(nodeId)) {
// console.log(allNodes[nodeId]);
updateArray.push(allNodes[nodeId]);
}
}
nodes.update(updateArray);
} else {
// console.log("Nothing was selected");
for (let nodeId in allNodes) {
if (allNodes.hasOwnProperty(nodeId)) {
// console.log(allNodes[nodeId]);
// allNodes[nodeId].color = {};
updateArray.push(allNodes[nodeId]);
}
}
nodes.update(updateArray);
}
}

function filterHighlight(params) {
allNodes = nodes.get({ returnType: "Object" });
// if something is selected:
if (params.nodes.length > 0) {
filterActive = true;
let selectedNodes = params.nodes;

// hiding all nodes and saving the label
for (let nodeId in allNodes) {
allNodes[nodeId].hidden = true;
if (allNodes[nodeId].savedLabel === undefined) {
allNodes[nodeId].savedLabel = allNodes[nodeId].label;
allNodes[nodeId].label = undefined;
}
}

for (let i=0; i < selectedNodes.length; i++) {
allNodes[selectedNodes[i]].hidden = false;
if (allNodes[selectedNodes[i]].savedLabel !== undefined) {
allNodes[selectedNodes[i]].label = allNodes[selectedNodes[i]].savedLabel;
allNodes[selectedNodes[i]].savedLabel = undefined;
}
}

} else if (filterActive === true) {
// reset all nodes
for (let nodeId in allNodes) {
allNodes[nodeId].hidden = false;
if (allNodes[nodeId].savedLabel !== undefined) {
allNodes[nodeId].label = allNodes[nodeId].savedLabel;
allNodes[nodeId].savedLabel = undefined;
}
}
filterActive = false;
}

// transform the object into an array
var updateArray = [];
if (params.nodes.length > 0) {
for (let nodeId in allNodes) {
if (allNodes.hasOwnProperty(nodeId)) {
updateArray.push(allNodes[nodeId]);
}
}
nodes.update(updateArray);
} else {
for (let nodeId in allNodes) {
if (allNodes.hasOwnProperty(nodeId)) {
updateArray.push(allNodes[nodeId]);
}
}
nodes.update(updateArray);
}
}

function selectNode(nodes) {
network.selectNodes(nodes);
neighbourhoodHighlight({ nodes: nodes });
return nodes;
}

function selectNodes(nodes) {
network.selectNodes(nodes);
filterHighlight({nodes: nodes});
return nodes;
}

function highlightFilter(filter) {
let selectedNodes = []
let selectedProp = filter['property']
if (filter['item'] === 'node') {
let allNodes = nodes.get({ returnType: "Object" });
for (let nodeId in allNodes) {
if (allNodes[nodeId][selectedProp] && filter['value'].includes((allNodes[nodeId][selectedProp]).toString())) {
selectedNodes.push(nodeId)
}
}
}
else if (filter['item'] === 'edge'){
let allEdges = edges.get({returnType: 'object'});
// check if the selected property exists for selected edge and select the nodes connected to the edge
for (let edge in allEdges) {
if (allEdges[edge][selectedProp] && filter['value'].includes((allEdges[edge][selectedProp]).toString())) {
selectedNodes.push(allEdges[edge]['from'])
selectedNodes.push(allEdges[edge]['to'])
}
}
}
selectNodes(selectedNodes)
}
Loading

0 comments on commit 58a3b67

Please sign in to comment.