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 "/assets/font-awesome/css/all.css" %}
|
||||||
{% style "/css/screen.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 "/js/home.js" %}
|
||||||
{% script "/assets/font-awesome/js/all.js" %}
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var csrfToken = "{{csrf-token}}";
|
var csrfToken = "{{csrf-token}}";
|
||||||
</script>
|
</script>
|
||||||
{% script "/js/app.js" %} <!-- Compiled clojurescript -->
|
{% script "/js/app.js" %} <!-- Compiled clojurescript -->
|
||||||
|
|
||||||
{% script "/js/graphing.js" %} <!-- Vega graphing -->
|
{% script "/js/graphing.js" %} <!-- Graph graphing -->
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -25,4 +25,9 @@ body {
|
||||||
@keyframes spin {
|
@keyframes spin {
|
||||||
0% { transform: rotate(0deg); }
|
0% { transform: rotate(0deg); }
|
||||||
100% { transform: rotate(360deg); }
|
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) {
|
function loadGraph(request_data) {
|
||||||
view = new vega.View(vega.parse(spec))
|
|
||||||
.renderer('canvas') // set renderer (canvas or svg)
|
var nodes = new vis.DataSet(
|
||||||
.initialize('#view') // initialize view within parent DOM container
|
request_data["nodes"].map(node => {
|
||||||
.hover() // enable hover encode set processing
|
return {
|
||||||
.run();
|
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', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
|
||||||
// Get all "navbar-burger" elements
|
// Get all "navbar-burger" elements
|
||||||
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
|
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
|
||||||
|
|
||||||
// Check if there are any navbar burgers
|
// Check if there are any navbar burgers
|
||||||
if ($navbarBurgers.length > 0) {
|
if ($navbarBurgers.length > 0) {
|
||||||
|
|
@ -26,4 +26,4 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
|
||||||
function removeThis(ele) {
|
function removeThis(ele) {
|
||||||
ele.parentNode.remove();
|
ele.parentNode.remove();
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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