Spaces:
Build error
Build error
| <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/[email protected]/dist/css/bootstrap.min.css" | |
| rel="stylesheet" | |
| integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" | |
| crossorigin="anonymous" | |
| /> | |
| <script | |
| src="https://cdn.jsdelivr.net/npm/[email protected]/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": "Fictional organization", "id": "Night\u0027S Watch", "label": "Night\u0027S Watch", "shape": "dot", "title": "Fictional organization"}, {"font": {"color": "white"}, "group": "Person", "id": "David Benioff", "label": "David Benioff", "shape": "dot", "title": "Person"}, {"font": {"color": "white"}, "group": "Award", "id": "Primetime Emmy Awards", "label": "Primetime Emmy Awards", "shape": "dot", "title": "Award"}, {"font": {"color": "white"}, "group": "Award", "id": "Hugo Awards", "label": "Hugo Awards", "shape": "dot", "title": "Award"}, {"font": {"color": "white"}, "group": "Person", "id": "D. B. Weiss", "label": "D. B. Weiss", "shape": "dot", "title": "Person"}, {"font": {"color": "white"}, "group": "Fictional continent", "id": "Essos", "label": "Essos", "shape": "dot", "title": "Fictional continent"}, {"font": {"color": "white"}, "group": "Organization", "id": "Hbo", "label": "Hbo", "shape": "dot", "title": "Organization"}, {"font": {"color": "white"}, "group": "Person", "id": "George R. R. Martin", "label": "George R. R. Martin", "shape": "dot", "title": "Person"}, {"font": {"color": "white"}, "group": "Television series", "id": "A Knight Of The Seven Kingdoms", "label": "A Knight Of The Seven Kingdoms", "shape": "dot", "title": "Television series"}, {"font": {"color": "white"}, "group": "Book series", "id": "A Song Of Ice And Fire", "label": "A Song Of Ice And Fire", "shape": "dot", "title": "Book series"}, {"font": {"color": "white"}, "group": "Award", "id": "Golden Globe Award For Best Television Series \u2013 Drama", "label": "Golden Globe Award For Best Television Series \u2013 Drama", "shape": "dot", "title": "Award"}, {"font": {"color": "white"}, "group": "Book", "id": "A Game Of Thrones", "label": "A Game Of Thrones", "shape": "dot", "title": "Book"}, {"font": {"color": "white"}, "group": "Television series", "id": "Game Of Thrones", "label": "Game Of Thrones", "shape": "dot", "title": "Television series"}, {"font": {"color": "white"}, "group": "Fictional object", "id": "Iron Throne", "label": "Iron Throne", "shape": "dot", "title": "Fictional object"}, {"font": {"color": "white"}, "group": "Fictional place", "id": "Seven Kingdoms", "label": "Seven Kingdoms", "shape": "dot", "title": "Fictional place"}, {"font": {"color": "white"}, "group": "Television series", "id": "House Of The Dragon", "label": "House Of The Dragon", "shape": "dot", "title": "Television series"}, {"font": {"color": "white"}, "group": "Award", "id": "Peabody Award", "label": "Peabody Award", "shape": "dot", "title": "Award"}, {"font": {"color": "white"}, "group": "Fictional continent", "id": "Westeros", "label": "Westeros", "shape": "dot", "title": "Fictional continent"}]); | |
| edges = new vis.DataSet([{"arrows": "to", "from": "Game Of Thrones", "label": "creator", "to": "David Benioff"}, {"arrows": "to", "from": "Game Of Thrones", "label": "creator", "to": "D. B. Weiss"}, {"arrows": "to", "from": "Game Of Thrones", "label": "network", "to": "Hbo"}, {"arrows": "to", "from": "Game Of Thrones", "label": "adaptation", "to": "A Song Of Ice And Fire"}, {"arrows": "to", "from": "A Song Of Ice And Fire", "label": "author", "to": "George R. R. Martin"}, {"arrows": "to", "from": "A Song Of Ice And Fire", "label": "first_book", "to": "A Game Of Thrones"}, {"arrows": "to", "from": "Game Of Thrones", "label": "setting", "to": "Westeros"}, {"arrows": "to", "from": "Game Of Thrones", "label": "setting", "to": "Essos"}, {"arrows": "to", "from": "Game Of Thrones", "label": "focus", "to": "Iron Throne"}, {"arrows": "to", "from": "Game Of Thrones", "label": "focus", "to": "Seven Kingdoms"}, {"arrows": "to", "from": "Game Of Thrones", "label": "focus", "to": "Night\u0027S Watch"}, {"arrows": "to", "from": "Game Of Thrones", "label": "award", "to": "Primetime Emmy Awards"}, {"arrows": "to", "from": "Game Of Thrones", "label": "award", "to": "Hugo Awards"}, {"arrows": "to", "from": "Game Of Thrones", "label": "award", "to": "Peabody Award"}, {"arrows": "to", "from": "Game Of Thrones", "label": "nomination", "to": "Golden Globe Award For Best Television Series \u2013 Drama"}, {"arrows": "to", "from": "House Of The Dragon", "label": "network", "to": "Hbo"}, {"arrows": "to", "from": "A Knight Of The Seven Kingdoms", "label": "network", "to": "Hbo"}]); | |
| 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> |