You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
wiki/templates/graph.html

80 lines
2.2 KiB

{{ 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'
}
},
layout: {
improvedLayout: false
}
};
// initialize your network!
var network = new vis.Network(container, data, options);
network.on('doubleClick', function (props) {
console.log(props)
if (props.nodes.length) {
let nodeId = props.nodes[0]
let node = nodes.get(nodeId)
window.location.href = '/edit/'+node.label
}
})
</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 }}