wiki/templates/graph.html

{{ define "content" }}
    <h1 class="title is-1">{{ .Title }}</h1>
    <div id="mynetwork" style="height:800px"></div>

    <script src="https://unpkg.com/vis-network" type="application/javascript"></script>
    <script src="https://unpkg.com/vis-data" type="application/javascript"></script>
    <script type="text/javascript">
        // create an array with nodes
        var nodes = new vis.DataSet({{ .Nodes }});

        // create an array with edges
        var edges = new vis.DataSet({{ .Edges }});

        // create a network
        var container = document.getElementById('mynetwork');

        // provide the data in the vis format
        var data = {
            nodes: nodes,
            edges: edges
        };
        var options = {
            edges: {
                arrows: 'to',
                color: {
                    highlight: 'green'
                }
            },

            nodes: {
                shape: 'dot',
                size: 15,
                font: {
                    background: 'white'
                }
            }
        };

        // initialize your network!
        var network = new vis.Network(container, data, options);
        network.on('doubleClick', function (props) {
            console.log(props)
            // window.location.href = '/edit/'+props.items[0]
        })
    </script>

{{ end }}

{{ define "navbar" }}
    {{ if $.Session.LoggedIn }}
        <a href="/edit/{{ .Name }}" class="navbar-item">Edit</a>
        <a href="/history/{{ .Name }}" class="navbar-item">History</a>
        <a href="/recent/" class="navbar-item">Recent Changes</a>
        <a href="/graph/" class="navbar-item">Graph</a>
        <a href="/auth/logout" class="navbar-item">Logout</a>
        <span class="navbar-item"><b>{{ $.Session.Me }}</b></span>
    {{ else }}
        <a href="/auth/login" class="navbar-item">Login</a>
    {{ end }}
{{ end }}

{{ define "content_head" }}
    <style>
        .edit {
            color: red;
        }

        .tag {
            color: #444;
        }
    </style>
{{ end }}