Spaces:

SandhyaMadhunagula
/

GNN-Knowledge-Graph

Sleeping

App Files Files Community

SandhyaMadhunagula commited on Apr 28

Commit

9dd6d9d

verified ·

1 Parent(s): 2adbc09

Upload 3 files

Browse files

Files changed (3) hide show

static/graph.html +358 -0
static/graph.png +0 -0
static/network_bg.png +3 -0

static/graph.html ADDED Viewed

	@@ -0,0 +1,358 @@

+<html>
+    <head>
+        <meta charset="utf-8">
+            <script>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)
+}</script>
+            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.2/dist/dist/vis-network.min.css" integrity="sha512-WgxfT5LWjfszlPHXRmBWHkV2eceiWTOBvrKCNbdgDYTHrT2AeLCGbF4sZlZw3UMN3WtL0tGUoIAKsu8mllg/XA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+            <script src="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.2/dist/vis-network.min.js" integrity="sha512-LnvoEWDFrqGHlHmDD2101OrLcbsfkrzoSpvtSQtxK3RMnRV0eOkhhBN2dXHKRrUU8p2DGRTk35n4O8nWSVe1mQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<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="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
+          rel="stylesheet"
+          integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
+          crossorigin="anonymous"
+        />
+        <script
+          src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/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>
+    </head>
+    <body>
+        <div class="card" style="width: 100%">
+            <div id="mynetwork" class="card-body"></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": "#00d2ff", "font": {"color": "black"}, "id": "Node", "label": "Node", "shadow": {"color": "rgba(0,210,255,0.6)", "enabled": true, "size": 10}, "shape": "dot", "size": 25}, {"color": "#00d2ff", "font": {"color": "black"}, "id": "Knowledge Graph", "label": "Knowledge Graph", "shadow": {"color": "rgba(0,210,255,0.6)", "enabled": true, "size": 10}, "shape": "dot", "size": 25}, {"color": "#00d2ff", "font": {"color": "black"}, "id": "Nodes", "label": "Nodes", "shadow": {"color": "rgba(0,210,255,0.6)", "enabled": true, "size": 10}, "shape": "dot", "size": 25}, {"color": "#00d2ff", "font": {"color": "black"}, "id": "Graph", "label": "Graph", "shadow": {"color": "rgba(0,210,255,0.6)", "enabled": true, "size": 10}, "shape": "dot", "size": 25}, {"color": "#00d2ff", "font": {"color": "black"}, "id": "Recommendation Systems", "label": "Recommendation Systems", "shadow": {"color": "rgba(0,210,255,0.6)", "enabled": true, "size": 10}, "shape": "dot", "size": 25}, {"color": "#00d2ff", "font": {"color": "black"}, "id": "Fraud Detection", "label": "Fraud Detection", "shadow": {"color": "rgba(0,210,255,0.6)", "enabled": true, "size": 10}, "shape": "dot", "size": 25}, {"color": "#00d2ff", "font": {"color": "black"}, "id": "Data-Driven Models", "label": "Data-Driven Models", "shadow": {"color": "rgba(0,210,255,0.6)", "enabled": true, "size": 10}, "shape": "dot", "size": 25}, {"color": "#00d2ff", "font": {"color": "black"}, "id": "Machine Learning", "label": "Machine Learning", "shadow": {"color": "rgba(0,210,255,0.6)", "enabled": true, "size": 10}, "shape": "dot", "size": 25}, {"color": "#00d2ff", "font": {"color": "black"}, "id": "Network", "label": "Network", "shadow": {"color": "rgba(0,210,255,0.6)", "enabled": true, "size": 10}, "shape": "dot", "size": 25}, {"color": "#00d2ff", "font": {"color": "black"}, "id": "Graph Neural Networks", "label": "Graph Neural Networks", "shadow": {"color": "rgba(0,210,255,0.6)", "enabled": true, "size": 10}, "shape": "dot", "size": 25}, {"color": "#00d2ff", "font": {"color": "black"}, "id": "Graph-Based Data", "label": "Graph-Based Data", "shadow": {"color": "rgba(0,210,255,0.6)", "enabled": true, "size": 10}, "shape": "dot", "size": 25}, {"color": "#00d2ff", "font": {"color": "black"}, "id": "Multi-Relational Graph", "label": "Multi-Relational Graph", "shadow": {"color": "rgba(0,210,255,0.6)", "enabled": true, "size": 10}, "shape": "dot", "size": 25}, {"color": "#00d2ff", "font": {"color": "black"}, "id": "Relationships", "label": "Relationships", "shadow": {"color": "rgba(0,210,255,0.6)", "enabled": true, "size": 10}, "shape": "dot", "size": 25}, {"color": "#00d2ff", "font": {"color": "black"}, "id": "Edges", "label": "Edges", "shadow": {"color": "rgba(0,210,255,0.6)", "enabled": true, "size": 10}, "shape": "dot", "size": 25}, {"color": "#00d2ff", "font": {"color": "black"}, "id": "Links", "label": "Links", "shadow": {"color": "rgba(0,210,255,0.6)", "enabled": true, "size": 10}, "shape": "dot", "size": 25}, {"color": "#00d2ff", "font": {"color": "black"}, "id": "Interconnected Nodes", "label": "Interconnected Nodes", "shadow": {"color": "rgba(0,210,255,0.6)", "enabled": true, "size": 10}, "shape": "dot", "size": 25}]);
+                  edges = new vis.DataSet([{"arrows": "to", "color": "#a29bfe", "from": "Node", "label": "part of", "to": "Knowledge Graph"}, {"arrows": "to", "color": "#a29bfe", "from": "Nodes", "label": "part of", "to": "Graph"}, {"arrows": "to", "color": "#a29bfe", "from": "Nodes", "label": "part of", "to": "Network"}, {"arrows": "to", "color": "#a29bfe", "from": "Nodes", "label": "part of", "to": "Multi-Relational Graph"}, {"arrows": "to", "color": "#a29bfe", "from": "Nodes", "label": "part of", "to": "Relationships"}, {"arrows": "to", "color": "#a29bfe", "from": "Recommendation Systems", "label": "use", "to": "Fraud Detection"}, {"arrows": "to", "color": "#a29bfe", "from": "Data-Driven Models", "label": "subclass of", "to": "Machine Learning"}, {"arrows": "to", "color": "#a29bfe", "from": "Graph Neural Networks", "label": "uses", "to": "Graph-Based Data"}, {"arrows": "to", "color": "#a29bfe", "from": "Multi-Relational Graph", "label": "has parts of the class", "to": "Nodes"}, {"arrows": "to", "color": "#a29bfe", "from": "Edges", "label": "part of", "to": "Relationships"}, {"arrows": "to", "color": "#a29bfe", "from": "Links", "label": "part of", "to": "Interconnected Nodes"}, {"arrows": "to", "color": "#a29bfe", "from": "Interconnected Nodes", "label": "has part", "to": "Links"}]);
+                  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 = {
+    "configure": {
+        "enabled": false
+    },
+    "edges": {
+        "color": {
+            "inherit": true
+        },
+        "smooth": {
+            "enabled": true,
+            "type": "dynamic"
+        }
+    },
+    "interaction": {
+        "dragNodes": true,
+        "hideEdgesOnDrag": false,
+        "hideNodesOnDrag": false
+    },
+    "physics": {
+        "enabled": true,
+        "forceAtlas2Based": {
+            "avoidOverlap": 0,
+            "centralGravity": 0.01,
+            "damping": 0.4,
+            "gravitationalConstant": -50,
+            "springConstant": 0.08,
+            "springLength": 150
+        },
+        "solver": "forceAtlas2Based",
+        "stabilization": {
+            "enabled": true,
+            "fit": true,
+            "iterations": 1000,
+            "onlyDynamicEdges": false,
+            "updateInterval": 50
+        }
+    }
+};
+                  network = new vis.Network(container, data, options);
+                  return network;
+              }
+              drawGraph();
+        </script>
+    </body>
+</html>

static/graph.png ADDED Viewed

static/network_bg.png ADDED Viewed

Git LFS Details

SHA256: 31599eec73aa1ea678292a9108d51f46686962cafd177198b906a136ba8a92bd
Pointer size: 131 Bytes
Size of remote file: 434 kB