Hugging Face's logo

Spaces:
Demosthene-OR
/
Knowledge_Graph_Generator
Sleeping

App Files Community
Knowledge_Graph_Generator / knowledge_graph.html
Demosthene-OR's picture
Demosthene-OR
....
652068d
Raw
History Blame
26.2 kB
<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: 600px;
 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": "Person", "id": "Stannis_Baratheon", "label": "Stannis_Baratheon", "shape": "dot", "title": "Person"}, {"font": {"color": "white"}, "group": "Person", "id": "Bran_Stark", "label": "Bran_Stark", "shape": "dot", "title": "Person"}, {"font": {"color": "white"}, "group": "Person", "id": "Jaime_Lannister", "label": "Jaime_Lannister", "shape": "dot", "title": "Person"}, {"font": {"color": "white"}, "group": "Organization", "id": "Night\u0027S_Watch", "label": "Night\u0027S_Watch", "shape": "dot", "title": "Organization"}, {"font": {"color": "white"}, "group": "Organization", "id": "White_Walkers", "label": "White_Walkers", "shape": "dot", "title": "Organization"}, {"font": {"color": "white"}, "group": "Person", "id": "Joffrey_Baratheon", "label": "Joffrey_Baratheon", "shape": "dot", "title": "Person"}, {"font": {"color": "white"}, "group": "Person", "id": "Petyr_Baelish", "label": "Petyr_Baelish", "shape": "dot", "title": "Person"}, {"font": {"color": "white"}, "group": "Person", "id": "Yara_Greyjoy", "label": "Yara_Greyjoy", "shape": "dot", "title": "Person"}, {"font": {"color": "white"}, "group": "Person", "id": "Lysa_Arryn", "label": "Lysa_Arryn", "shape": "dot", "title": "Person"}, {"font": {"color": "white"}, "group": "Person", "id": "Ellaria_Sand", "label": "Ellaria_Sand", "shape": "dot", "title": "Person"}, {"font": {"color": "white"}, "group": "Person", "id": "Margaery_Tyrell", "label": "Margaery_Tyrell", "shape": "dot", "title": "Person"}, {"font": {"color": "white"}, "group": "Person", "id": "Mance_Rayder", "label": "Mance_Rayder", "shape": "dot", "title": "Person"}, {"font": {"color": "white"}, "group": "Person", "id": "Sandor_Clegane", "label": "Sandor_Clegane", "shape": "dot", "title": "Person"}, {"font": {"color": "white"}, "group": "Person", "id": "Euron_Greyjoy", "label": "Euron_Greyjoy", "shape": "dot", "title": "Person"}, {"font": {"color": "white"}, "group": "Person", "id": "Sansa_Stark", "label": "Sansa_Stark", "shape": "dot", "title": "Person"}, {"font": {"color": "white"}, "group": "Person", "id": "Viserys_Targaryen", "label": "Viserys_Targaryen", "shape": "dot", "title": "Person"}, {"font": {"color": "white"}, "group": "Person", "id": "Robb_Stark", "label": "Robb_Stark", "shape": "dot", "title": "Person"}, {"font": {"color": "white"}, "group": "Person", "id": "Theon_Greyjoy", "label": "Theon_Greyjoy", "shape": "dot", "title": "Person"}, {"font": {"color": "white"}, "group": "Person", "id": "Olenna_Tyrell", "label": "Olenna_Tyrell", "shape": "dot", "title": "Person"}, {"font": {"color": "white"}, "group": "Person", "id": "Jon_Snow", "label": "Jon_Snow", "shape": "dot", "title": "Person"}, {"font": {"color": "white"}, "group": "Person", "id": "Daenerys_Targaryen", "label": "Daenerys_Targaryen", "shape": "dot", "title": "Person"}, {"font": {"color": "white"}, "group": "Person", "id": "Samwell_Tarly", "label": "Samwell_Tarly", "shape": "dot", "title": "Person"}, {"font": {"color": "white"}, "group": "Person", "id": "Balon_Greyjoy", "label": "Balon_Greyjoy", "shape": "dot", "title": "Person"}, {"font": {"color": "white"}, "group": "Person", "id": "Missandei", "label": "Missandei", "shape": "dot", "title": "Person"}, {"font": {"color": "white"}, "group": "Organization", "id": "Second_Sons", "label": "Second_Sons", "shape": "dot", "title": "Organization"}, {"font": {"color": "white"}, "group": "Person", "id": "Cersei_Lannister", "label": "Cersei_Lannister", "shape": "dot", "title": "Person"}, {"font": {"color": "white"}, "group": "Person", "id": "Tommen_Baratheon", "label": "Tommen_Baratheon", "shape": "dot", "title": "Person"}, {"font": {"color": "white"}, "group": "Person", "id": "Ned_Stark", "label": "Ned_Stark", "shape": "dot", "title": "Person"}, {"font": {"color": "white"}, "group": "Person", "id": "Catelyn_Stark", "label": "Catelyn_Stark", "shape": "dot", "title": "Person"}, {"font": {"color": "white"}, "group": "Person", "id": "Arya_Stark", "label": "Arya_Stark", "shape": "dot", "title": "Person"}, {"font": {"color": "white"}, "group": "Person", "id": "Tywin_Lannister", "label": "Tywin_Lannister", "shape": "dot", "title": "Person"}, {"font": {"color": "white"}, "group": "Person", "id": "Tyrion_Lannister", "label": "Tyrion_Lannister", "shape": "dot", "title": "Person"}, {"font": {"color": "white"}, "group": "Organization", "id": "Sparrows", "label": "Sparrows", "shape": "dot", "title": "Organization"}, {"font": {"color": "white"}, "group": "Person", "id": "Three-Eyed_Raven", "label": "Three-Eyed_Raven", "shape": "dot", "title": "Person"}, {"font": {"color": "white"}, "group": "Person", "id": "Aegon_Targaryen", "label": "Aegon_Targaryen", "shape": "dot", "title": "Person"}, {"font": {"color": "white"}, "group": "Person", "id": "Khal_Drogo", "label": "Khal_Drogo", "shape": "dot", "title": "Person"}, {"font": {"color": "white"}, "group": "Person", "id": "Robert_Baratheon", "label": "Robert_Baratheon", "shape": "dot", "title": "Person"}, {"font": {"color": "white"}, "group": "Person", "id": "Brienne_Of_Tarth", "label": "Brienne_Of_Tarth", "shape": "dot", "title": "Person"}]);
 edges = new vis.DataSet([{"arrows": "to", "from": "Ned_Stark", "label": "hand_of_the_king", "to": "Robert_Baratheon"}, {"arrows": "to", "from": "Ned_Stark", "label": "parent", "to": "Sansa_Stark"}, {"arrows": "to", "from": "Ned_Stark", "label": "parent", "to": "Arya_Stark"}, {"arrows": "to", "from": "Ned_Stark", "label": "parent", "to": "Bran_Stark"}, {"arrows": "to", "from": "Cersei_Lannister", "label": "sibling", "to": "Jaime_Lannister"}, {"arrows": "to", "from": "Cersei_Lannister", "label": "parent", "to": "Joffrey_Baratheon"}, {"arrows": "to", "from": "Jaime_Lannister", "label": "parent", "to": "Joffrey_Baratheon"}, {"arrows": "to", "from": "Jon_Snow", "label": "member", "to": "Night\u0027S_Watch"}, {"arrows": "to", "from": "Viserys_Targaryen", "label": "sibling", "to": "Daenerys_Targaryen"}, {"arrows": "to", "from": "Daenerys_Targaryen", "label": "spouse", "to": "Khal_Drogo"}, {"arrows": "to", "from": "Robb_Stark", "label": "parent", "to": "Catelyn_Stark"}, {"arrows": "to", "from": "Catelyn_Stark", "label": "ally", "to": "Brienne_Of_Tarth"}, {"arrows": "to", "from": "Tyrion_Lannister", "label": "enemy", "to": "Stannis_Baratheon"}, {"arrows": "to", "from": "Arya_Stark", "label": "servant", "to": "Tywin_Lannister"}, {"arrows": "to", "from": "Theon_Greyjoy", "label": "betrayal", "to": "Robb_Stark"}, {"arrows": "to", "from": "Jon_Snow", "label": "captured_by", "to": "Mance_Rayder"}, {"arrows": "to", "from": "Samwell_Tarly", "label": "encounter", "to": "White_Walkers"}, {"arrows": "to", "from": "Daenerys_Targaryen", "label": "ally", "to": "Missandei"}, {"arrows": "to", "from": "Daenerys_Targaryen", "label": "ally", "to": "Second_Sons"}, {"arrows": "to", "from": "Olenna_Tyrell", "label": "parent", "to": "Margaery_Tyrell"}, {"arrows": "to", "from": "Petyr_Baelish", "label": "spouse", "to": "Lysa_Arryn"}, {"arrows": "to", "from": "Arya_Stark", "label": "enemy", "to": "Sandor_Clegane"}, {"arrows": "to", "from": "Bran_Stark", "label": "mentor", "to": "Three-Eyed_Raven"}, {"arrows": "to", "from": "Tommen_Baratheon", "label": "spouse", "to": "Margaery_Tyrell"}, {"arrows": "to", "from": "Sparrows", "label": "enemy", "to": "Cersei_Lannister"}, {"arrows": "to", "from": "Ellaria_Sand", "label": "enemy", "to": "Balon_Greyjoy"}, {"arrows": "to", "from": "Euron_Greyjoy", "label": "kill", "to": "Balon_Greyjoy"}, {"arrows": "to", "from": "Euron_Greyjoy", "label": "kidnap", "to": "Yara_Greyjoy"}, {"arrows": "to", "from": "Jon_Snow", "label": "identity", "to": "Aegon_Targaryen"}]);
 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>