Spaces:

Dorjzodovsuren
/

KnowledgeGraph_visualizer

Running

App Files Files Community

Dorjzodovsuren commited on Jun 5

Commit

6160702

verified ·

1 Parent(s): a431423

Update index.html

Browse files

Files changed (1) hide show

index.html +491 -18

index.html CHANGED Viewed

@@ -1,19 +1,492 @@
-<!doctype html>
 <html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

 <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>
+                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tom-select/2.0.0-rc.4/css/tom-select.min.css" integrity="sha512-43fHB3GLgZfz8QXl1RPQ8O66oIgv3po9cJ5erMt1c4QISq9dYb195T3vr5ImnJPXuVroKcGBPXBFKETW8jrPNQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+                <script src="https://cdnjs.cloudflare.com/ajax/libs/tom-select/2.0.0-rc.4/js/tom-select.complete.js" integrity="sha512-jeF9CfnvzDiw9G9xiksVjxR2lib44Gnovvkv+3CgCG6NXCD4gqlA5nDAVW5WjpA+i+/zKsUWV5xNEbW1X/HH0Q==" 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: 1200px;
+                 background-color: #222222;
+                 border: 1px solid lightgray;
+                 position: relative;
+                 float: left;
+             }
+        </style>
+    </head>
+    <body>
+        <div class="card" style="width: 100%">
+              <div id="filter-menu" class="card-header">
+                <div class="row no-gutters">
+                  <div class="col-3 pb-2">
+                    <select
+                            class="form-select"
+                            aria-label="Default select example"
+                            onchange="updateFilter(value, 'item')"
+                            id="select-item"
+                        >
+                        <option value="">Select a network item</option>
+                        <option value="edge">edge</option>
+                        <option value="node">node</option>
+                    </select>
+                  </div>
+                  <div class="col-3 pb-2">
+                    <select
+                            class="form-select"
+                            aria-label="Default select example"
+                            onchange="updateFilter(value, 'property')"
+                            id="select-property"
+                        >
+                        <option value="">Select a property...</option>
+                    </select>
+                  </div>
+                  <div class="col-3 pb-2">
+                    <select
+                            class="form-select"
+                            aria-label="Default select example"
+                            id="select-value"
+                        >
+                        <option value="">Select value(s)...</option>
+                    </select>
+                  </div>
+                  <div class="col-1 pb-2">
+                    <button type="button" class="btn btn-primary btn-block" onclick="highlightFilter(filter);">Filter</button>
+                  </div>
+                  <div class="col-2 pb-2">
+                    <button type="button" class="btn btn-primary btn-block" onclick="clearFilter(true)">Reset Selection</button>
+                  </div>
+                </div>
+              </div>
+            <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 : []
+              };
+                  // explicitly using onItemAdd and this function as we need to save multiple values
+                  let updateValueFilter = function() {
+                      return function () {
+                      filter['value'].push(arguments[0])
+                      }
+                  }
+                  let valueControl = new TomSelect("#select-value",{
+                      maxItems: null,
+                      valueField: 'id',
+                      labelField: 'title',
+                      searchField: 'title',
+                      create: false,
+                      sortField: {
+                          field: "text",
+                          direction: "asc"
+                      },
+                      onItemAdd: updateValueFilter()
+                  });
+                  let addValues = function() {
+                      return function () {
+                          // clear the current value options and add the selected attribute values
+                          // tom-select handles duplicates
+                          let selectedProperty = arguments[0];
+                          valueControl.clear();
+                          valueControl.clearOptions();
+                          filter['value'] = []
+                          if (filter['item'] === 'node') {
+                              for (let each in allNodes) {
+                                  valueControl.addOption({
+                                      id:allNodes[each][selectedProperty],
+                                      title:allNodes[each][selectedProperty]
+                                  })
+                              }
+                          }
+                          else if (filter['item'] === 'edge') {
+                              for (let each in allEdges) {
+                                  valueControl.addOption({
+                                      id:allEdges[each][selectedProperty],
+                                      title:allEdges[each][selectedProperty]
+                                  })
+                              }
+                          }
+                      }
+                  };
+                  let propControl = new TomSelect("#select-property",{
+                      valueField: 'id',
+                      labelField: 'title',
+                      searchField: 'title',
+                      create: false,
+                      sortField: {
+                          field: "text",
+                          direction: "asc"
+                      },
+                      onItemAdd: addValues()
+                  });
+                  let addProperties = function() {
+                      return function () {
+                          // loops through the selected network item and adds the attributes to dropdown
+                          // tom-select handles duplicates
+                          clearFilter(false)
+                          if (arguments[0] === 'edge') {
+                              for (let each in allEdges) {
+                                  if (allEdges.hasOwnProperty(each)) {
+                                      for (let eachProp in allEdges[each]) {
+                                          if (allEdges[each].hasOwnProperty(eachProp)) {
+                                              propControl.addOption({id: eachProp, title: eachProp})
+                                          }
+                                      }
+                                  }
+                              }
+                          }
+                          else if (arguments[0] === 'node') {
+                              for (let each in allNodes) {
+                                  if (allNodes.hasOwnProperty(each)) {
+                                      for (let eachProp in allNodes[each]) {
+                                          if (allNodes[each].hasOwnProperty(eachProp)
+                                              && (eachProp !== 'hidden' && eachProp !== 'savedLabel'
+                                                  && eachProp !== 'hiddenLabel')) {
+                                              propControl.addOption({id: eachProp, title: eachProp})
+                                          }
+                                      }
+                                  }
+                              }
+                          }
+                      }
+                  };
+                  let itemControl = new TomSelect("#select-item",{
+                      create: false,
+                      sortField:{
+                          field: "text",
+                          direction: "asc"
+                      },
+                      onItemAdd: addProperties()
+                  });
+                  function clearFilter(reset) {
+                      // utility function to clear all the selected filter options
+                      // if reset is set to true, the existing filter will be removed
+                      // else, only the dropdown options are cleared
+                      propControl.clear();
+                      propControl.clearOptions();
+                      valueControl.clear();
+                      valueControl.clearOptions();
+                      filter = {
+                          item : '',
+                          property : '',
+                          value : []
+                      }
+                      if (reset) {
+                          itemControl.clear();
+                          filterHighlight({nodes: []})
+                      }
+                  }
+                  function updateFilter(value, key) {
+                      // key could be 'item' or 'property' and value is as selected in dropdown
+                      filter[key] = 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([{"font": {"color": "white"}, "group": "Concept", "id": "Elliptical Orbit", "label": "Elliptical Orbit", "shape": "dot", "title": "Concept"}, {"font": {"color": "white"}, "group": "Technology", "id": "Orbital Refilling", "label": "Orbital Refilling", "shape": "dot", "title": "Technology"}, {"font": {"color": "white"}, "group": "Organization", "id": "Airbus", "label": "Airbus", "shape": "dot", "title": "Organization"}, {"font": {"color": "white"}, "group": "Material", "id": "Advanced Ceramics", "label": "Advanced Ceramics", "shape": "dot", "title": "Material"}, {"font": {"color": "white"}, "group": "Technology", "id": "Reusable Heat Shield", "label": "Reusable Heat Shield", "shape": "dot", "title": "Technology"}, {"font": {"color": "white"}, "group": "State of matter", "id": "Plasma", "label": "Plasma", "shape": "dot", "title": "State of matter"}, {"font": {"color": "white"}, "group": "Group", "id": "People", "label": "People", "shape": "dot", "title": "Group"}, {"font": {"color": "white"}, "group": "Organization", "id": "Boeing", "label": "Boeing", "shape": "dot", "title": "Organization"}, {"font": {"color": "white"}, "group": "Person", "id": "Douglas Adams", "label": "Douglas Adams", "shape": "dot", "title": "Person"}, {"font": {"color": "white"}, "group": "Concept", "id": "Equipment", "label": "Equipment", "shape": "dot", "title": "Concept"}, {"font": {"color": "white"}, "group": "Chemical compound", "id": "Carbon Dioxide", "label": "Carbon Dioxide", "shape": "dot", "title": "Chemical compound"}, {"font": {"color": "white"}, "group": "Version", "id": "Version 3", "label": "Version 3", "shape": "dot", "title": "Version"}, {"font": {"color": "white"}, "group": "Spacecraft", "id": "Starship", "label": "Starship", "shape": "dot", "title": "Spacecraft"}, {"font": {"color": "white"}, "group": "Celestial body", "id": "Moon", "label": "Moon", "shape": "dot", "title": "Celestial body"}, {"font": {"color": "white"}, "group": "Program", "id": "Apollo Program", "label": "Apollo Program", "shape": "dot", "title": "Program"}, {"font": {"color": "white"}, "group": "Concept", "id": "Heat", "label": "Heat", "shape": "dot", "title": "Concept"}, {"font": {"color": "white"}, "group": "Concept", "id": "Pressure", "label": "Pressure", "shape": "dot", "title": "Concept"}, {"font": {"color": "white"}, "group": "Rocket", "id": "Saturn V", "label": "Saturn V", "shape": "dot", "title": "Rocket"}, {"font": {"color": "white"}, "group": "Concept", "id": "Reliability", "label": "Reliability", "shape": "dot", "title": "Concept"}, {"font": {"color": "white"}, "group": "Planet", "id": "Mars", "label": "Mars", "shape": "dot", "title": "Planet"}, {"font": {"color": "white"}, "group": "Base", "id": "Moon Base Alpha", "label": "Moon Base Alpha", "shape": "dot", "title": "Base"}, {"font": {"color": "white"}, "group": "City", "id": "Starbase", "label": "Starbase", "shape": "dot", "title": "City"}, {"font": {"color": "white"}, "group": "Satellite", "id": "Starlink Satellite", "label": "Starlink Satellite", "shape": "dot", "title": "Satellite"}, {"font": {"color": "white"}, "group": "Rocket component", "id": "Super Heavy Booster", "label": "Super Heavy Booster", "shape": "dot", "title": "Rocket component"}, {"font": {"color": "white"}, "group": "Rocket engine", "id": "Raptor 3", "label": "Raptor 3", "shape": "dot", "title": "Rocket engine"}, {"font": {"color": "white"}, "group": "Chemical element", "id": "Oxygen", "label": "Oxygen", "shape": "dot", "title": "Chemical element"}, {"font": {"color": "white"}, "group": "Robot", "id": "Optimus", "label": "Optimus", "shape": "dot", "title": "Robot"}, {"font": {"color": "white"}, "group": "State", "id": "Texas", "label": "Texas", "shape": "dot", "title": "State"}, {"font": {"color": "white"}, "group": "Organization", "id": "Spacex", "label": "Spacex", "shape": "dot", "title": "Organization"}, {"font": {"color": "white"}, "group": "Book", "id": "The Hitchhiker\u0027S Guide To The Galaxy", "label": "The Hitchhiker\u0027S Guide To The Galaxy", "shape": "dot", "title": "Book"}, {"font": {"color": "white"}, "group": "Service", "id": "Starlink Internet", "label": "Starlink Internet", "shape": "dot", "title": "Service"}, {"font": {"color": "white"}, "group": "Planet", "id": "Earth", "label": "Earth", "shape": "dot", "title": "Planet"}]);
+                  edges = new vis.DataSet([{"arrows": "to", "from": "Starbase", "label": "located_in", "to": "Texas"}, {"arrows": "to", "from": "Starbase", "label": "purpose_supports_travel_to", "to": "Mars"}, {"arrows": "to", "from": "Starbase", "label": "associated_with", "to": "Spacex"}, {"arrows": "to", "from": "Starship", "label": "uses", "to": "Super Heavy Booster"}, {"arrows": "to", "from": "Starship", "label": "uses", "to": "Raptor 3"}, {"arrows": "to", "from": "Starship", "label": "carries", "to": "Starlink Satellite"}, {"arrows": "to", "from": "Starship", "label": "travels_to", "to": "Mars"}, {"arrows": "to", "from": "Starship", "label": "travels_to", "to": "Moon"}, {"arrows": "to", "from": "Spacex", "label": "built", "to": "Starbase"}, {"arrows": "to", "from": "Spacex", "label": "developed", "to": "Starship"}, {"arrows": "to", "from": "Spacex", "label": "developed", "to": "Super Heavy Booster"}, {"arrows": "to", "from": "Spacex", "label": "developed", "to": "Raptor 3"}, {"arrows": "to", "from": "Spacex", "label": "developed", "to": "Starlink Satellite"}, {"arrows": "to", "from": "Starlink Satellite", "label": "provides", "to": "Starlink Internet"}, {"arrows": "to", "from": "Starship", "label": "production_scale_comparable_to", "to": "Boeing"}, {"arrows": "to", "from": "Starship", "label": "production_scale_comparable_to", "to": "Airbus"}, {"arrows": "to", "from": "Starship", "label": "transports_to_mars", "to": "People"}, {"arrows": "to", "from": "Starship", "label": "transports_to_mars", "to": "Equipment"}, {"arrows": "to", "from": "Version 3", "label": "achieves", "to": "Reliability"}, {"arrows": "to", "from": "Version 3", "label": "achieves", "to": "Orbital Refilling"}, {"arrows": "to", "from": "Version 3", "label": "is_a_version_of", "to": "Starship"}, {"arrows": "to", "from": "Douglas Adams", "label": "authored", "to": "The Hitchhiker\u0027S Guide To The Galaxy"}, {"arrows": "to", "from": "Starship", "label": "capability_twice_that_of", "to": "Saturn V"}, {"arrows": "to", "from": "Moon Base Alpha", "label": "follows", "to": "Apollo Program"}, {"arrows": "to", "from": "Starship", "label": "transports_to_mars", "to": "Optimus"}, {"arrows": "to", "from": "Optimus", "label": "explores", "to": "Mars"}, {"arrows": "to", "from": "Raptor 3", "label": "improves", "to": "Reliability"}, {"arrows": "to", "from": "Reusable Heat Shield", "label": "withstands", "to": "Heat"}, {"arrows": "to", "from": "Reusable Heat Shield", "label": "withstands", "to": "Pressure"}, {"arrows": "to", "from": "Advanced Ceramics", "label": "withstand", "to": "Heat"}, {"arrows": "to", "from": "Advanced Ceramics", "label": "withstand", "to": "Pressure"}, {"arrows": "to", "from": "Carbon Dioxide", "label": "becomes_in_atmosphere", "to": "Plasma"}, {"arrows": "to", "from": "Plasma", "label": "contains", "to": "Oxygen"}, {"arrows": "to", "from": "Elliptical Orbit", "label": "connects", "to": "Earth"}, {"arrows": "to", "from": "Elliptical Orbit", "label": "connects", "to": "Mars"}]);
+                  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 = {"physics": {"forceAtlas2Based": {"gravitationalConstant": -100, "centralGravity": 0.01, "springLength": 200, "springConstant": 0.08}, "minVelocity": 0.75, "solver": "forceAtlas2Based"}};
+                  network = new vis.Network(container, data, options);
+                  return network;
+              }
+              drawGraph();
+        </script>
+    </body>
+</html>