Merge branch 'replace-vega-by-vis' into 'master'
Replace vega by vis See merge request ZeusWPI/cat!3
This commit is contained in:
flynn
commit
830989acf4
9 changed files with 99 additions and 2005 deletions
|
|
@ -375,16 +375,17 @@
|
|||
{% style "/assets/font-awesome/css/all.css" %}
|
||||
{% style "/css/screen.css" %}
|
||||
|
||||
{% script "/js/vendor/vega-4.4.0.js" %}
|
||||
{% style "/css/vendor/vis.min.css" %}
|
||||
{% script "js/vendor/vis.min.js" %}
|
||||
{% script "/assets/font-awesome/js/all.js" %}
|
||||
|
||||
{% script "/js/home.js" %}
|
||||
{% script "/assets/font-awesome/js/all.js" %}
|
||||
|
||||
<script type="text/javascript">
|
||||
var csrfToken = "{{csrf-token}}";
|
||||
</script>
|
||||
{% script "/js/app.js" %} <!-- Compiled clojurescript -->
|
||||
|
||||
{% script "/js/graphing.js" %} <!-- Vega graphing -->
|
||||
{% script "/js/graphing.js" %} <!-- Graph graphing -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -26,3 +26,8 @@ body {
|
|||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
#view {
|
||||
height: 600px;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
|
|
|||
1
resources/public/css/vendor/vis.min.css
vendored
Normal file
1
resources/public/css/vendor/vis.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -1,13 +1,40 @@
|
|||
var view;
|
||||
var xhttp = new XMLHttpRequest();
|
||||
xhttp.onreadystatechange = function() {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
var responseData = this.responseText;
|
||||
console.log(responseData);
|
||||
loadGraph(JSON.parse(responseData));
|
||||
}
|
||||
};
|
||||
xhttp.open("GET", "relations_zeroed", true);
|
||||
xhttp.send();
|
||||
|
||||
vega.loader()
|
||||
.load('/js/spec.json')
|
||||
.then(function(data) { render(JSON.parse(data)); });
|
||||
|
||||
function render(spec) {
|
||||
view = new vega.View(vega.parse(spec))
|
||||
.renderer('canvas') // set renderer (canvas or svg)
|
||||
.initialize('#view') // initialize view within parent DOM container
|
||||
.hover() // enable hover encode set processing
|
||||
.run();
|
||||
function loadGraph(request_data) {
|
||||
|
||||
var nodes = new vis.DataSet(
|
||||
request_data["nodes"].map(node => {
|
||||
return {
|
||||
id: node.index,
|
||||
label: node.name.slice(0,30) + (node.name.length > 30 ? "..." : ""),
|
||||
color: 'hsl('+Math.floor(Math.random()*361)+',50%,75%)'
|
||||
};
|
||||
})
|
||||
);
|
||||
var edges = new vis.DataSet(
|
||||
request_data["links"].map(link => {
|
||||
return {
|
||||
from: link.source,
|
||||
to: link.target
|
||||
};
|
||||
})
|
||||
);
|
||||
|
||||
var container = document.getElementById("view");
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {};
|
||||
var network = new vis.Network(container, data, options);
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
// Get all "navbar-burger" elements
|
||||
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
|
||||
// Get all "navbar-burger" elements
|
||||
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
|
||||
|
||||
// Check if there are any navbar burgers
|
||||
if ($navbarBurgers.length > 0) {
|
||||
|
|
|
|||
|
|
@ -1,325 +0,0 @@
|
|||
{
|
||||
"$schema": "https://vega.github.io/schema/vega/v4.json",
|
||||
"width": 700,
|
||||
"height": 400,
|
||||
"padding": {
|
||||
"top": 25,
|
||||
"left": 0,
|
||||
"right": 0,
|
||||
"bottom": 0
|
||||
},
|
||||
"autosize": "none",
|
||||
"signals": [
|
||||
{
|
||||
"name": "hover",
|
||||
"value": null,
|
||||
"on": [
|
||||
{
|
||||
"events": "symbol:mouseover",
|
||||
"update": "datum"
|
||||
},
|
||||
{
|
||||
"events": "symbol:mouseout",
|
||||
"update": "null"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "title",
|
||||
"value": "",
|
||||
"update": "hover ? hover.name : '' "
|
||||
},
|
||||
{
|
||||
"name": "cx",
|
||||
"update": "width / 2"
|
||||
},
|
||||
{
|
||||
"name": "cy",
|
||||
"update": "height / 2"
|
||||
},
|
||||
{
|
||||
"name": "nodeRadius",
|
||||
"value": 10,
|
||||
"bind": {
|
||||
"input": "range",
|
||||
"min": 1,
|
||||
"max": 50,
|
||||
"step": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "nodeCharge",
|
||||
"value": -70,
|
||||
"bind": {
|
||||
"input": "range",
|
||||
"min": -100,
|
||||
"max": 10,
|
||||
"step": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "linkDistance",
|
||||
"value": 70,
|
||||
"bind": {
|
||||
"input": "range",
|
||||
"min": 5,
|
||||
"max": 100,
|
||||
"step": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "static",
|
||||
"value": false,
|
||||
"bind": {
|
||||
"input": "checkbox"
|
||||
}
|
||||
},
|
||||
{
|
||||
"description": "State variable for active node fix status.",
|
||||
"name": "fix",
|
||||
"value": false,
|
||||
"on": [
|
||||
{
|
||||
"events": "symbol:mouseout[!event.buttons], window:mouseup",
|
||||
"update": "false"
|
||||
},
|
||||
{
|
||||
"events": "symbol:mouseover",
|
||||
"update": "fix || true"
|
||||
},
|
||||
{
|
||||
"events": "[symbol:mousedown, window:mouseup] > window:mousemove!",
|
||||
"update": "xy()",
|
||||
"force": true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"description": "Graph node most recently interacted with.",
|
||||
"name": "node",
|
||||
"value": null,
|
||||
"on": [
|
||||
{
|
||||
"events": "symbol:mouseover",
|
||||
"update": "fix === true ? item() : node"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"description": "Flag to restart Force simulation upon data changes.",
|
||||
"name": "restart",
|
||||
"value": false,
|
||||
"on": [
|
||||
{
|
||||
"events": {
|
||||
"signal": "fix"
|
||||
},
|
||||
"update": "fix && fix.length"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"data": [
|
||||
{
|
||||
"name": "node-data",
|
||||
"url": "/relations_zeroed",
|
||||
"format": {
|
||||
"type": "json",
|
||||
"property": "nodes"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "link-data",
|
||||
"url": "/relations_zeroed",
|
||||
"format": {
|
||||
"type": "json",
|
||||
"property": "links"
|
||||
}
|
||||
}
|
||||
],
|
||||
"scales": [
|
||||
{
|
||||
"name": "color",
|
||||
"type": "ordinal",
|
||||
"domain": {
|
||||
"data": "node-data",
|
||||
"field": "group"
|
||||
},
|
||||
"range": {
|
||||
"scheme": "category20c"
|
||||
}
|
||||
}
|
||||
],
|
||||
"marks": [
|
||||
{
|
||||
"name": "nodes-group",
|
||||
"type": "group",
|
||||
"zindex": 1,
|
||||
"from": {
|
||||
"data": "node-data"
|
||||
},
|
||||
"marks": [
|
||||
{
|
||||
"name": "nodes",
|
||||
"type": "symbol",
|
||||
"encode": {
|
||||
"enter": {
|
||||
"fill": {
|
||||
"scale": "color",
|
||||
"field": {"parent": "group"}
|
||||
},
|
||||
"stroke": {
|
||||
"value": "white"
|
||||
}
|
||||
},
|
||||
"update": {
|
||||
"size": {
|
||||
"signal": "2 * nodeRadius * nodeRadius"
|
||||
},
|
||||
"cursor": {
|
||||
"value": "pointer"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"interactive": false,
|
||||
"encode": {
|
||||
"enter": {
|
||||
"fill": {
|
||||
"value": "black"
|
||||
},
|
||||
"fontSize": {
|
||||
"value": 12
|
||||
},
|
||||
"align": {
|
||||
"value": "center"
|
||||
},
|
||||
"text": {
|
||||
"field": {"parent": "name"}
|
||||
},
|
||||
"y": {
|
||||
"value": -10
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"on": [
|
||||
{
|
||||
"trigger": "fix",
|
||||
"modify": "node",
|
||||
"values": "fix === true ? {fx: node.x, fy: node.y} : {fx: fix[0], fy: fix[1]}"
|
||||
},
|
||||
{
|
||||
"trigger": "!fix",
|
||||
"modify": "node",
|
||||
"values": "{fx: null, fy: null}"
|
||||
}
|
||||
],
|
||||
"transform": [
|
||||
{
|
||||
"type": "force",
|
||||
"iterations": 300,
|
||||
"restart": {
|
||||
"signal": "restart"
|
||||
},
|
||||
"static": {
|
||||
"signal": "static"
|
||||
},
|
||||
"signal": "force",
|
||||
"forces": [
|
||||
{
|
||||
"force": "center",
|
||||
"x": {
|
||||
"signal": "cx"
|
||||
},
|
||||
"y": {
|
||||
"signal": "cy"
|
||||
}
|
||||
},
|
||||
{
|
||||
"force": "collide",
|
||||
"radius": {
|
||||
"signal": "nodeRadius"
|
||||
}
|
||||
},
|
||||
{
|
||||
"force": "nbody",
|
||||
"strength": {
|
||||
"signal": "nodeCharge"
|
||||
}
|
||||
},
|
||||
{
|
||||
"force": "link",
|
||||
"links": "link-data",
|
||||
"distance": {
|
||||
"signal": "linkDistance"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "path",
|
||||
"from": {
|
||||
"data": "link-data"
|
||||
},
|
||||
"interactive": false,
|
||||
"encode": {
|
||||
"update": {
|
||||
"stroke": {
|
||||
"value": "#ccc"
|
||||
},
|
||||
"strokeWidth": {
|
||||
"value": 1
|
||||
}
|
||||
}
|
||||
},
|
||||
"transform": [
|
||||
{
|
||||
"type": "linkpath",
|
||||
"require": {
|
||||
"signal": "force"
|
||||
},
|
||||
"shape": "line",
|
||||
"sourceX": "datum.source.x",
|
||||
"sourceY": "datum.source.y",
|
||||
"targetX": "datum.target.x",
|
||||
"targetY": "datum.target.y"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"interactive": false,
|
||||
"encode": {
|
||||
"enter": {
|
||||
"x": {
|
||||
"signal": "width",
|
||||
"offset": -5
|
||||
},
|
||||
"y": {
|
||||
"value": 0
|
||||
},
|
||||
"fill": {
|
||||
"value": "black"
|
||||
},
|
||||
"fontSize": {
|
||||
"value": 20
|
||||
},
|
||||
"align": {
|
||||
"value": "right"
|
||||
}
|
||||
},
|
||||
"update": {
|
||||
"text": {
|
||||
"signal": "title"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
File diff suppressed because it is too large
Load diff
1
resources/public/js/vendor/vega-4.4.0.js
vendored
1
resources/public/js/vendor/vega-4.4.0.js
vendored
File diff suppressed because one or more lines are too long
47
resources/public/js/vendor/vis.min.js
vendored
Normal file
47
resources/public/js/vendor/vis.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue