<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DOKK Graph</title>
<style>
html, body, #graph {
font-family: monospace;
font-size: 1rem;
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
.sidebar {
background: #fbfbfb;
box-shadow: 0 0 .5rem 0 lightgray;
bottom: 0;
left: 0;
padding: 1rem;
position: absolute;
top: 0;
width: 25%;
}
input[type=search] {
padding: .5rem 1rem;
width: 100%;
}
#search_results {
list-style: none;
margin: 1rem 0 0 0;
padding: 0;
}
#search_results > li {
cursor: pointer;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="graph"></div>
<script src="vis-network.min.js"></script>
<script src="data.js"></script>
<script>
var container = document.getElementById("graph");
var data = { nodes: nodes, edges: edges };
var options = {
nodes: {
borderWidth: 1,
color: {
background: "white",
border: "gray",
highlight: {
background: "yellow"
},
hover: {
background: "yellow"
}
},
font: {
color: "black"
},
shape: "box"
},
edges: {
color: {
color: "#f0f0f0",
hover: "#e0e0e0",
highlight: "red"
},
font: {
size: 10,
align: "middle",
},
physics: true,
smooth: false,
},
layout: {
randomSeed: 0
},
physics: {
solver: "repulsion",
repulsion: {
nodeDistance: 1000
},
stabilization: {
enabled: false
},
timestep: 1,
},
interaction: {
hover: true
},
};
network = new vis.Network(container, data, options);
function search(text) {
text = text.trim();
about_container = document.getElementById('about');
results_container = document.getElementById('search_results');
if(text.length == 0) {
about_container.style.display = "block";
results_container.style.display = "none";
return;
}
about_container.style.display = "none";
results_container.style.display = "block";
text = text.toLowerCase();
results = nodes.filter(obj => {
return obj.label.toLowerCase().startsWith(text);
}).slice(0, 100);
results_container.replaceChildren();
results.forEach(function (result, index, arr) {
li = document.createElement("li");
li.appendChild(document.createTextNode(result.label));
li.addEventListener("click", function(event) {
network.selectNodes([ result.id ]);
network.focus(result.id, {
scale: 1.5,
animation: false
});
});
results_container.appendChild(li);
});
}
</script>
<div class="sidebar">
<input type="search" oninput="search(this.value)" placeholder="Search node..." />
<div id="about">
<p>
<i>DOKK</i> is a community-curated graph.
</p>
<p>
Join the
<a href="https://clif.peers.community/dokk/dokk.mlist">mailing list</a>
or download the
<a href="https://clif.peers.community/dokk/graph.git">data</a>,
and participate in the creation of a free database of the world's knowledge.
Let's build it together!
<br /><br /><br /><br />
IRC: #<a href="https://peers.community/">peers</a> at irc.libera.chat
</p>
</div>
<ul id="search_results"></ul>
</div>
</body>
</html>