| <html> |
| <head> |
| <meta charset="utf-8"> |
| |
| <script>function neighbourhoodHighlight(params) { |
| |
| allNodes = nodes.get({ returnType: "Object" }); |
| |
| |
| if (params.nodes.length > 0) { |
| highlightActive = true; |
| var i, j; |
| var selectedNode = params.nodes[0]; |
| var degrees = 2; |
| |
| |
| for (let nodeId in allNodes) { |
| |
| 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 = []; |
| |
| |
| for (i = 1; i < degrees; i++) { |
| for (j = 0; j < connectedNodes.length; j++) { |
| allConnectedNodes = allConnectedNodes.concat( |
| network.getConnectedNodes(connectedNodes[j]) |
| ); |
| } |
| } |
| |
| |
| for (i = 0; i < allConnectedNodes.length; i++) { |
| |
| 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; |
| } |
| } |
| |
| |
| for (i = 0; i < connectedNodes.length; i++) { |
| |
| 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; |
| } |
| } |
| |
| |
| |
| allNodes[selectedNode].color = nodeColors[selectedNode]; |
| if (allNodes[selectedNode].hiddenLabel !== undefined) { |
| allNodes[selectedNode].label = allNodes[selectedNode].hiddenLabel; |
| allNodes[selectedNode].hiddenLabel = undefined; |
| } |
| } else if (highlightActive === true) { |
| |
| |
| for (let nodeId in allNodes) { |
| |
| allNodes[nodeId].color = nodeColors[nodeId]; |
| |
| if (allNodes[nodeId].hiddenLabel !== undefined) { |
| allNodes[nodeId].label = allNodes[nodeId].hiddenLabel; |
| allNodes[nodeId].hiddenLabel = undefined; |
| } |
| } |
| highlightActive = false; |
| } |
| |
| |
| 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 filterHighlight(params) { |
| allNodes = nodes.get({ returnType: "Object" }); |
| |
| if (params.nodes.length > 0) { |
| filterActive = true; |
| let selectedNodes = params.nodes; |
| |
| |
| 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) { |
| |
| 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; |
| } |
| |
| |
| 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'}); |
| |
| 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 |
| 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"> |
| |
| |
| var edges; |
| var nodes; |
| var allNodes; |
| var allEdges; |
| var nodeColors; |
| var originalNodes; |
| var network; |
| var container; |
| var options, data; |
| var filter = { |
| item : '', |
| property : '', |
| value : [] |
| }; |
| |
| |
| |
| |
| |
| 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 () { |
| |
| |
| 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 () { |
| |
| |
| 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) { |
| |
| |
| |
| propControl.clear(); |
| propControl.clearOptions(); |
| valueControl.clear(); |
| valueControl.clearOptions(); |
| filter = { |
| item : '', |
| property : '', |
| value : [] |
| } |
| if (reset) { |
| itemControl.clear(); |
| filterHighlight({nodes: []}) |
| } |
| } |
| |
| function updateFilter(value, key) { |
| |
| filter[key] = value |
| } |
| |
| |
| |
| |
| function drawGraph() { |
| var container = document.getElementById('mynetwork'); |
| |
| |
| |
| |
| 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" }); |
| |
| 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> |
