Skip to content

Commit

Permalink
rebuilding site Tue Oct 29 17:10:40 CET 2024
Browse files Browse the repository at this point in the history
  • Loading branch information
@florisdenhengst
florisdenhengst committed Oct 29, 2024
1 parent 352f232 commit 527840b
Show file tree
Hide file tree
Showing 13 changed files with 714 additions and 17 deletions.
118 changes: 118 additions & 0 deletions imgs/topological_dag.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">

<script src="topological_dag_files/utils.js"></script>
<link rel="stylesheet" href="topological_dag_files/vis-network.min.css" integrity="sha512-WgxfT5LWjfszlPHXRmBWHkV2eceiWTOBvrKCNbdgDYTHrT2AeLCGbF4sZlZw3UMN3WtL0tGUoIAKsu8mllg/XA==" crossorigin="anonymous" referrerpolicy="no-referrer">
<script src="topological_dag_files/vis-network.min.js" integrity="sha512-LnvoEWDFrqGHlHmDD2101OrLcbsfkrzoSpvtSQtxK3RMnRV0eOkhhBN2dXHKRrUU8p2DGRTk35n4O8nWSVe1mQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>


</head><body><center>
<h1></h1>
</center>

<!-- <link rel="stylesheet" href="../node_modules/vis/dist/vis.min.css" type="text/css" />
<script type="text/javascript" src="../node_modules/vis/dist/vis.js"> </script>-->
<link href="topological_dag_files/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="topological_dag_files/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>


<center>
<h1></h1>
</center>
<style type="text/css">

#mynetwork {
width: 100%;
height: 600px;
background-color: #ffffff;
border: 1px solid lightgray;
position: relative;
float: left;
}






</style>




<div class="card" style="width: 100%">


<div id="mynetwork" class="card-body"><div class="vis-network" style="position: relative; overflow: hidden; touch-action: pan-y; user-select: none; width: 100%; height: 100%;" tabindex="0"><canvas style="position: relative; touch-action: none; user-select: none; width: 100%; height: 100%;" width="3528" height="1132"></canvas></div></div>
</div>




<script type="text/javascript">

// initialize global variables.
var edges;
var nodes;
var allNodes;
var allEdges;
var nodeColors;
var originalNodes;
var network;
var container;
var options, data;
var filter = {
item : '',
property : '',
value : []
};





// This method is responsible for drawing the graph, returns the drawn network
function drawGraph() {
var container = document.getElementById('mynetwork');



// parsing and collecting nodes and edges from the python
nodes = new vis.DataSet([{"color": "#97c2fc", "font": {"color": "black"}, "id": "root", "label": "root", "shape": "dot", "size": 10, "x": 0, "y": 0}, {"color": "#97c2fc", "font": {"color": "black"}, "id": "T2 (MoveableAnimals)", "label": "T2 (MoveableAnimals)", "shape": "dot", "size": 10, "x": 0, "y": -200}, {"color": "#97c2fc", "font": {"color": "black"}, "id": "T1 (BioAnimals)", "label": "T1 (BioAnimals)", "shape": "dot", "size": 10, "x": 100, "y": -200}, {"color": "#97c2fc", "font": {"color": "black"}, "id": "S1 (Mammals)", "label": "S1 (Mammals)", "shape": "dot", "size": 10, "x": 300, "y": -400}, {"color": "#97c2fc", "font": {"color": "black"}, "id": "S2 (Birds)", "label": "S2 (Birds)", "shape": "dot", "size": 10, "x": 400, "y": -400}, {"color": "#97c2fc", "font": {"color": "black"}, "id": "S3 (Insects)", "label": "S3 (Insects)", "shape": "dot", "size": 10, "x": 500, "y": -400}, {"color": "#97c2fc", "font": {"color": "black"}, "id": "C1 (Platypus)", "label": "C1 (Platypus)", "shape": "dot", "size": 10, "x": 0, "y": -600}, {"color": "#97c2fc", "font": {"color": "black"}, "id": "C2 (Dog)", "label": "C2 (Dog)", "shape": "dot", "size": 10, "x": 100, "y": -600}, {"color": "#97c2fc", "font": {"color": "black"}, "id": "C3 (Duck)", "label": "C3 (Duck)", "shape": "dot", "size": 10, "x": 200, "y": -600}, {"color": "#97c2fc", "font": {"color": "black"}, "id": "C4 (Kiwi)", "label": "C4 (Kiwi)", "shape": "dot", "size": 10, "x": 300, "y": -600}, {"color": "#97c2fc", "font": {"color": "black"}, "id": "C5 (Ant)", "label": "C5 (Ant)", "shape": "dot", "size": 10, "x": 400, "y": -600}, {"color": "#97c2fc", "font": {"color": "black"}, "id": "C6 (Spider)", "label": "C6 (Spider)", "shape": "dot", "size": 10, "x": 500, "y": -600}, {"color": "#97c2fc", "font": {"color": "black"}, "id": "S4 (FlyingAnimals)", "label": "S4 (FlyingAnimals)", "shape": "dot", "size": 10, "x": 0, "y": -400}, {"color": "#97c2fc", "font": {"color": "black"}, "id": "S5 (WalkingAnimals)", "label": "S5 (WalkingAnimals)", "shape": "dot", "size": 10, "x": 100, "y": -400}, {"color": "#97c2fc", "font": {"color": "black"}, "id": "S6 (CrawlingAnimals)", "label": "S6 (CrawlingAnimals)", "shape": "dot", "size": 10, "x": 200, "y": -400}]);
edges = new vis.DataSet([{"arrows": "to", "from": "root", "to": "T2 (MoveableAnimals)", "width": 1}, {"arrows": "to", "from": "root", "to": "T1 (BioAnimals)", "width": 1}, {"arrows": "to", "from": "T1 (BioAnimals)", "to": "S1 (Mammals)", "width": 1}, {"arrows": "to", "from": "T1 (BioAnimals)", "to": "S2 (Birds)", "width": 1}, {"arrows": "to", "from": "T1 (BioAnimals)", "to": "S3 (Insects)", "width": 1}, {"arrows": "to", "from": "S1 (Mammals)", "to": "C1 (Platypus)", "width": 1}, {"arrows": "to", "from": "S1 (Mammals)", "to": "C2 (Dog)", "width": 1}, {"arrows": "to", "from": "S2 (Birds)", "to": "C3 (Duck)", "width": 1}, {"arrows": "to", "from": "S2 (Birds)", "to": "C4 (Kiwi)", "width": 1}, {"arrows": "to", "from": "S3 (Insects)", "to": "C5 (Ant)", "width": 1}, {"arrows": "to", "from": "S3 (Insects)", "to": "C6 (Spider)", "width": 1}, {"arrows": "to", "from": "T2 (MoveableAnimals)", "to": "S4 (FlyingAnimals)", "width": 1}, {"arrows": "to", "from": "T2 (MoveableAnimals)", "to": "S5 (WalkingAnimals)", "width": 1}, {"arrows": "to", "from": "T2 (MoveableAnimals)", "to": "S6 (CrawlingAnimals)", "width": 1}, {"arrows": "to", "from": "S4 (FlyingAnimals)", "to": "C3 (Duck)", "width": 1}, {"arrows": "to", "from": "S5 (WalkingAnimals)", "to": "C4 (Kiwi)", "width": 1}, {"arrows": "to", "from": "S5 (WalkingAnimals)", "to": "C5 (Ant)", "width": 1}, {"arrows": "to", "from": "S5 (WalkingAnimals)", "to": "C6 (Spider)", "width": 1}, {"arrows": "to", "from": "S6 (CrawlingAnimals)", "to": "C1 (Platypus)", "width": 1}]);

nodeColors = {};
allNodes = nodes.get({ returnType: "Object" });
for (nodeId in allNodes) {
nodeColors[nodeId] = allNodes[nodeId].color;
}
allEdges = edges.get({ returnType: "Object" });
// adding nodes and edges to the graph
data = {nodes: nodes, edges: edges};

var options = {"edges": {"arrows": {"to": {"enabled": true, "scaleFactor": 0.5}}, "color": {"inherit": false}}, "nodes": {"shape": "dot", "size": 15, "font": {"size": 14}}, "layout": {"hierarchical": {"enabled": true, "sortMethod": "directed"}}, "physics": {"enabled": false}};






network = new vis.Network(container, data, options);










return network;

}
drawGraph();
</script>

</body></html>
7 changes: 7 additions & 0 deletions imgs/topological_dag_files/bootstrap.bundle.min.js
View file

Large diffs are not rendered by default.

7 changes: 7 additions & 0 deletions imgs/topological_dag_files/bootstrap.min.css
View file

Large diffs are not rendered by default.

189 changes: 189 additions & 0 deletions imgs/topological_dag_files/utils.js
View file
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)
}
1 change: 1 addition & 0 deletions imgs/topological_dag_files/vis-network.min.css
View file

Large diffs are not rendered by default.

27 changes: 27 additions & 0 deletions imgs/topological_dag_files/vis-network.min.js
View file

Large diffs are not rendered by default.

Loading

0 comments on commit 527840b

Please sign in to comment.