Commit b8050e30 authored by Thomas Zwickl's avatar Thomas Zwickl
Browse files

Improve im- and export of repository graph.

parent cdae8a45
......@@ -18,6 +18,7 @@
<script src="../js/helperClass.js"></script>
<script src="../js/cytoscapeGraph.js"></script>
<script src="../js/rainbowvis.js"></script>
<script src="../js/FileSaver.min.js"></script>
<link rel="stylesheet" href="../css/dropzone.css">
<script
src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
......@@ -58,6 +59,7 @@
var repositoryAddressList = [];
var repositoryNameList = [];
var jsonValues;
var jsonImport = false;
$(function() {
$("#header").load("header.html");
......@@ -93,6 +95,7 @@
r.onload = function(e) {
var contents = e.target.result;
jsonValues = JSON.parse(contents);
jsonImport = true;
helperClass.setButtonDisabled(
$('#visualizeRepositoryModel'), false);
helperClass.setButtonLoading(
......@@ -166,92 +169,102 @@
}
function parsingSuccessful(val, textStatus, jqXHR) {
jsonImport = false;
jsonValues = JSON.parse(val);
helperClass
.setButtonDisabled($('#visualizeRepositoryModel'), false);
helperClass.setButtonLoading($("#visualizeRepositoryModel"), false);
}
function importFromJson() {
if ($('#cy').is(':visible')) {
cytoscapeGraph.importFromJson("cy", jsonValues);
} else {
setTimeout(importFromJson, 500); //wait 500 ms, then try again
}
}
function extractDataAndPlot() {
prepareExportToJson();
var values = jsonValues;
nodes = []
for ( var component in values["components"]) {
var data = new Object();
data.data = new Object();
data.data.id = values["components"][component].id;
data.data.parent = values["components"][component].parentId;
data.data.name = values["components"][component].name;
data.data.color = "#75a8f9";
nodes.push(data);
}
var seffColorSpectrum = new Rainbow();
seffColorSpectrum.setSpectrum('green', 'yellow', 'red');
var minWeight = Number.MAX_VALUE, maxWeight = Number.MIN_VALUE;
for ( var seff in values["seffs"]) {
var weight = values["seffs"][seff].weight;
if (weight < minWeight) {
minWeight = weight;
if (jsonImport) {
importFromJson();
} else {
var values = jsonValues;
nodes = []
for ( var component in values["components"]) {
var data = new Object();
data.data = new Object();
data.data.id = values["components"][component].id;
data.data.parent = values["components"][component].parentId;
data.data.name = values["components"][component].name;
data.data.color = "#75a8f9";
nodes.push(data);
}
var seffColorSpectrum = new Rainbow();
seffColorSpectrum.setSpectrum('green', 'yellow', 'red');
var minWeight = Number.MAX_VALUE, maxWeight = Number.MIN_VALUE;
for ( var seff in values["seffs"]) {
var weight = values["seffs"][seff].weight;
if (weight < minWeight) {
minWeight = weight;
}
if (weight > maxWeight) {
maxWeight = weight;
}
}
if (weight > maxWeight) {
maxWeight = weight;
seffColorSpectrum.setNumberRange(minWeight, maxWeight);
for ( var seff in values["seffs"]) {
var data = new Object();
data.data = new Object();
data.data.id = values["seffs"][seff].id;
data.data.parent = values["seffs"][seff].componentId;
data.data.name = values["seffs"][seff].name + " [" + values["seffs"][seff].weight + "]";
data.data.weight = values["seffs"][seff].weight;
data.data.color = '#' + seffColorSpectrum.colourAt(values["seffs"][seff].weight);
nodes.push(data);
}
}
seffColorSpectrum.setNumberRange(minWeight, maxWeight);
for ( var seff in values["seffs"]) {
var data = new Object();
data.data = new Object();
data.data.id = values["seffs"][seff].id;
data.data.parent = values["seffs"][seff].componentId;
data.data.name = values["seffs"][seff].name + " [" + values["seffs"][seff].weight + "]";
data.data.weight = values["seffs"][seff].weight;
data.data.color = '#' + seffColorSpectrum.colourAt(values["seffs"][seff].weight);
nodes.push(data);
}
var edgesColorSpectrum = new Rainbow();
edgesColorSpectrum.setSpectrum('green', 'yellow', 'red');
minWeight = Number.MAX_VALUE, maxWeight = Number.MIN_VALUE;
for ( var externalCall in values["externalCalls"]) {
var weight = values["externalCalls"][externalCall].weight;
if (weight < minWeight) {
minWeight = weight;
var edgesColorSpectrum = new Rainbow();
edgesColorSpectrum.setSpectrum('green', 'yellow', 'red');
minWeight = Number.MAX_VALUE, maxWeight = Number.MIN_VALUE;
for ( var externalCall in values["externalCalls"]) {
var weight = values["externalCalls"][externalCall].weight;
if (weight < minWeight) {
minWeight = weight;
}
if (weight > maxWeight) {
maxWeight = weight;
}
}
edgesColorSpectrum.setNumberRange(minWeight, maxWeight);
if (weight > maxWeight) {
maxWeight = weight;
edges = []
for ( var externalCall in values["externalCalls"]) {
var data = new Object();
data.data = new Object();
data.data.id = values["externalCalls"][externalCall].id;
data.data.name = values["externalCalls"][externalCall].id + " [" + values["externalCalls"][externalCall].weight + "]";
data.data.source = values["externalCalls"][externalCall].from;
data.data.target = values["externalCalls"][externalCall].to;
data.data.weight = values["externalCalls"][externalCall].weight;
data.data.color = '#' + edgesColorSpectrum.colourAt(values["externalCalls"][externalCall].weight);
edges.push(data);
}
plotRepositoryModel(nodes, edges);
}
edgesColorSpectrum.setNumberRange(minWeight, maxWeight);
edges = []
for ( var externalCall in values["externalCalls"]) {
var data = new Object();
data.data = new Object();
data.data.id = values["externalCalls"][externalCall].id;
data.data.name = values["externalCalls"][externalCall].id + " [" + values["externalCalls"][externalCall].weight + "]";
data.data.source = values["externalCalls"][externalCall].from;
data.data.target = values["externalCalls"][externalCall].to;
data.data.weight = values["externalCalls"][externalCall].weight;
data.data.color = '#' + edgesColorSpectrum.colourAt(values["externalCalls"][externalCall].weight);
edges.push(data);
}
plotRepositoryModel(nodes, edges);
}
function prepareExportToJson() {
var data = "text/json;charset=utf-8,"
+ encodeURIComponent(JSON.stringify(jsonValues));
$("#jsonExport")
.replaceWith(
'<a href="data:' + data + '" download="repositoryModel.json">Export to JSON</a>');
function exportToJson() {
var blob = new Blob([JSON.stringify(cytoscapeGraph.exportToJson())], {type: "application/json"});
var saveAs = window.saveAs;
saveAs(blob, "repositoryModel.json");
}
function updateRepositoryAddressList(nodes, edges) {
......@@ -363,7 +376,7 @@
<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Repository Model</h4>
<div id="jsonExport" class="btn btn-primary btn-xs"></div>
<div id="jsonExport" class="btn btn-primary btn-xs" onclick="exportToJson()">Export to JSON</div>
</div>
<div class="modal-body">
<div id="cy"></div>
......
/*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js */
var saveAs=saveAs||function(e){"use strict";if(typeof e==="undefined"||typeof navigator!=="undefined"&&/MSIE [1-9]\./.test(navigator.userAgent)){return}var t=e.document,n=function(){return e.URL||e.webkitURL||e},r=t.createElementNS("http://www.w3.org/1999/xhtml","a"),o="download"in r,a=function(e){var t=new MouseEvent("click");e.dispatchEvent(t)},i=/constructor/i.test(e.HTMLElement)||e.safari,f=/CriOS\/[\d]+/.test(navigator.userAgent),u=function(t){(e.setImmediate||e.setTimeout)(function(){throw t},0)},s="application/octet-stream",d=1e3*40,c=function(e){var t=function(){if(typeof e==="string"){n().revokeObjectURL(e)}else{e.remove()}};setTimeout(t,d)},l=function(e,t,n){t=[].concat(t);var r=t.length;while(r--){var o=e["on"+t[r]];if(typeof o==="function"){try{o.call(e,n||e)}catch(a){u(a)}}}},p=function(e){if(/^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(e.type)){return new Blob([String.fromCharCode(65279),e],{type:e.type})}return e},v=function(t,u,d){if(!d){t=p(t)}var v=this,w=t.type,m=w===s,y,h=function(){l(v,"writestart progress write writeend".split(" "))},S=function(){if((f||m&&i)&&e.FileReader){var r=new FileReader;r.onloadend=function(){var t=f?r.result:r.result.replace(/^data:[^;]*;/,"data:attachment/file;");var n=e.open(t,"_blank");if(!n)e.location.href=t;t=undefined;v.readyState=v.DONE;h()};r.readAsDataURL(t);v.readyState=v.INIT;return}if(!y){y=n().createObjectURL(t)}if(m){e.location.href=y}else{var o=e.open(y,"_blank");if(!o){e.location.href=y}}v.readyState=v.DONE;h();c(y)};v.readyState=v.INIT;if(o){y=n().createObjectURL(t);setTimeout(function(){r.href=y;r.download=u;a(r);h();c(y);v.readyState=v.DONE});return}S()},w=v.prototype,m=function(e,t,n){return new v(e,t||e.name||"download",n)};if(typeof navigator!=="undefined"&&navigator.msSaveOrOpenBlob){return function(e,t,n){t=t||e.name||"download";if(!n){e=p(e)}return navigator.msSaveOrOpenBlob(e,t)}}w.abort=function(){};w.readyState=w.INIT=0;w.WRITING=1;w.DONE=2;w.error=w.onwritestart=w.onprogress=w.onwrite=w.onabort=w.onerror=w.onwriteend=null;return m}(typeof self!=="undefined"&&self||typeof window!=="undefined"&&window||this.content);if(typeof module!=="undefined"&&module.exports){module.exports.saveAs=saveAs}else if(typeof define!=="undefined"&&define!==null&&define.amd!==null){define("FileSaver.js",function(){return saveAs})}
......@@ -2,9 +2,22 @@
*
*/
var cytoscapeGraph = {};
var cy;
cytoscapeGraph.exportToJson = function() {
return cy.json();
}
cytoscapeGraph.importFromJson = function(containerId, json) {
cy = cytoscape({
container: $('#' + containerId),
});
cy.json(json);
}
cytoscapeGraph.plotRepositoryModel = function(containerId, nodes, edges) {
$('#' + containerId).cytoscape({
cy = cytoscape({
container: $('#' + containerId),
boxSelectionEnabled : true,
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment