Revize d7cfe537

new JSON format compatibility fixes

sources/src/main/webapp/js/app.js

@@ -242 +242 @@
 			});
 
 			if (verticesWithMostEdges.length > 0) {
-				var group = new Group;
+				var group = new Group({});
 
 				verticesWithMostEdges.forEach(function(vertex) {
 					group.addVertex(vertex);

sources/src/main/webapp/js/components/edge.js

@@ -6 +6 @@
 function Edge(props) {
 	/** @prop {integer} id Unique identifier of the edge. */
 	this.id = props.id;
-	/** @prop {integer} archetype Archetype of the edge. */
-	this.archetype = app.archetype.edge[props.subedgeInfo.archetype];
+	/** @prop {integer} archetype Archetype of the edge. TODO: why is there multiple subedgeInfo for one edge? */
+	this.archetype = -1;
 
 	var rootElement;
 

sources/src/main/webapp/js/components/group.js

@@ -5 +5 @@
  */
 function Group(props) {
 	/** @prop {integer} id Unique identifier of the group. */
-	this.id = app.groupList.length + 1;
+	this.id = props.hasOwnProperty('id') ? props.id : app.groupList.length + 1;
 	/** @prop {string} name Name of the group. */
 	this.name = props.hasOwnProperty('name') ? props.name : 'Group ' + this.id;
 	/** @prop {array} symbol Symbol of the group. */

sources/src/main/webapp/js/components/vertex.js

@@ -6 +6 @@
 function Vertex(props) {
 	/** @prop {integer} id Unique identifier of the vertex. */
 	this.id = props.id;
-	/** @prop {integer} archetype Archetype of the vertex. */
-	this.archetype = app.archetype.vertex[props.archetype];
+	/** @prop {integer} archetype Identifier of the vertex archetype. */
+	this.archetype = props.archetype;
 	/** @prop {string} name Name of the vertex. */
-	this.name = props.name.split(':')[1];
+	this.name = props.title.split(':')[1];
 	/** @prop {array} symbol Symbol of the group. */
 	this.symbol = app.markSymbol.getMarkSymbol();
 

sources/src/main/webapp/js/components/vertexContextMenuList.js

@@ -104 +104 @@
 	function nodeListItemClick(e) {
 		if (this instanceof Vertex) {
 			// create a new group
-			var group = new Group;
+			var group = new Group({});
 			group.setExcluded(true);
 			group.addVertex(this);
 

sources/src/main/webapp/js/components/vertexPopover.js

@@ -11 +11 @@
 	/**
 	 * Sets the contents of the popover.
 	 * @param {string} name Title of the popover.
-	 * @param {array} attributes List of attributes.
+	 * @param {array} attributeList List of attributes.
 	 */
-	this.setContent = function(name, attributes) {
+	this.setContent = function(name, attributeList) {
 		popoverTitle.innerText = name;
 
-		if (attributes.length > 0) {
-			attributes.forEach(function(attributes) {
-				var listItem = app.utils.createHtmlElement('li', {});
-				listItem.appendChild(document.createTextNode(attributes));
+		if (attributeList.length === 0) return;
 
-				detailsListElement.appendChild(listItem);
-			});
-		}
+		attributeList.forEach(function(attribute) {
+			var listItem = app.utils.createHtmlElement('li', {});
+			listItem.appendChild(document.createTextNode(`${attribute[0]}: ${attribute[1]}`));
+
+			detailsListElement.appendChild(listItem);
+		});
 	};
 
 	/**

sources/src/main/webapp/js/graphLoader.js

@@ -20 +20 @@
 
 		var canvasSize = ((data.vertices.length * 75) / Math.round(Math.sqrt(data.vertices.length))) + 1000;
 
-		// archetypes
+		// store archetypes
 		app.archetype.vertex = data.vertexArchetypes;
 		app.archetype.edge = data.edgeArchetypes;
 		app.archetype.icon = data.archetypeIcons;
 
-		// vertices
+		// construct vertices
 		var vertexMap = {};
 		data.vertices.forEach(function(component) {
 			var vertex = new Vertex(component);
@@ -55 +55 @@
 			app.nodeList.push(vertex);
 			app.vertexList.push(vertex);
 
-			vertexMap[component.symbolicName] = vertex;
-
-			app.viewportComponent.addVertex(vertex);
+			vertexMap[component.originalId] = vertex;
 		});
 
-		// edges
+		// construct edges
 		data.edges.forEach(function(component) {
 			var edge = new Edge(component);
 
@@ -74 +72 @@
 				toNode.addInEdge(edge);
 			}
 
-			app.edgeList.push(edge);
+			if (fromNode && toNode) {
+				fromNode.incrementRelatedArchetype(toNode.archetype);
+				toNode.incrementRelatedArchetype(fromNode.archetype);
+			}
 
-			app.viewportComponent.addEdge(edge);
+			app.edgeList.push(edge);
 		});
 
 		delete vertexMap;
 
+		// render components
+		app.vertexList.forEach(function(vertex) {
+			app.viewportComponent.addVertex(vertex);
+		});
+
+		app.edgeList.forEach(function(edge) {
+			app.viewportComponent.addEdge(edge);
+		});
+
 		// center viewport
 		app.viewportComponent.center();
 
@@ -92 +102 @@
 			app.sidebarComponent.unconnectedNodeListComponent.add(vertex);
 		});
 
-		// group vertex archetypes
-		var archetypeGroupMap = {};
+		// construct groups
+		data.groups.forEach(function(component) {
+			var group = new Group(component);
+			group.setExcluded(true);
 
-		data.defaultGroupArchetypes.forEach(function(archetypeIndex) {
 			app.vertexList.filter(function(vertex) {
-				return vertex.archetype === app.archetype.vertex[archetypeIndex];
+				return component.verticesId.indexOf(vertex.id) > -1;
 			}).forEach(function(vertex) {
-				if (archetypeGroupMap[archetypeIndex] instanceof Group) {
-					// group of the archetype vertices already exists
-					var group = archetypeGroupMap[archetypeIndex];
-
-				} else {
-					// create a new group
-					var group = new Group({
-						name: `${app.archetype.vertex[archetypeIndex].name} vertices`,
-					});
-					group.setExcluded(true);
-
-					app.nodeList.push(group);
-					app.groupList.push(group);
-
-					app.sidebarComponent.excludedNodeListComponent.add(group);
-
-					archetypeGroupMap[archetypeIndex] = group;
-				}
-
 				group.addVertex(vertex);
 			});
+
+			app.nodeList.push(group);
+			app.groupList.push(group);
+
+			app.sidebarComponent.excludedNodeListComponent.add(group);
 		});
 
 		// update status bar