dustdfg
/
dokk.org


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
							<!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.2,
                        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>