Merge pull request #33 from filipinascimento/new-features

New features Updated

README.md

@@ -5,12 +5,15 @@
 </p>
 
 <!-- Create a table centered text saying use Helios-Web experimental version here. Just drag and drop your gml, xnet or gexf file. Then it should point to Dark and Light versions as columns and with Density and without density as rows. All links should point to  http://heliosweb.io/docs/example/?advanced -->
+Test the preliminary version of Helios Web here:
 
 |         | Light Version | Dark Version |
 |---------|---------------|--------------|
 | No Density | [Light](http://heliosweb.io/docs/example/?advanced) | [Dark](http://heliosweb.io/docs/example/?advanced&dark) |
 | Density | [Light & Density](http://heliosweb.io/docs/example/?advanced&density) | [Dark & Density](http://heliosweb.io/docs/example/?advanced&dark&density) |
 
+You an drag and drop your own network in gml, xnet or gexf formats.
+
 
 Helios Web is a web-based library to visualize dynamic networks in real-time. Helios-web is under active development and aims to provide a simple API and optimized implementation to be integrated into other systems and render and layout large networks. This is the successor to the [Networks 3D project](https://filipinascimento.github.io/networks3d/) and the [Networks Web project](https://filipinascimento.github.io/software/networksweb/).
 

docs/example/script.js

@@ -1768,9 +1768,9 @@ let visualizeNetwork = async (networkData, settings = startSettings) => {
 
 
 
-	let heliosUI = new HeliosUI(helios,{
-		collapsed:true,
-	});
+	// let heliosUI = new HeliosUI(helios,{
+	// 	collapsed:true,
+	// });
 
 	helios.onReady(() => {
 		helios.trackAttribute("indexTracker", "index", {
@@ -2047,10 +2047,10 @@ function saveGML(network){
 	let nodes = [];
 	let edges = [];
 
+	let nodeIndex = 0;
 	for (let node of network.index2Node){
 		// filter any attribute starting with _ or named neighbors and edges
 		let nodeData = {};
-		let nodeIndex = 0;
 		let allPositions = helios.network.positions;
 		for (let [key,value] of Object.entries(node)){
 			if (!key.startsWith("_") && !ignoredProperties.has(key)){
@@ -2059,9 +2059,9 @@ function saveGML(network){
 			let posx = allPositions[nodeIndex*3];
 			let posy = allPositions[nodeIndex*3+1];
 			let posz = allPositions[nodeIndex*3+2];
-			nodeData.x = posx;
-			nodeData.y = posy;
-			nodeData.z = posz;
+			nodeData.posx = posx;
+			nodeData.posy = posy;
+			nodeData.posz = posz;
 		}
 
 		nodeData.id = nodeIndex;
@@ -2080,7 +2080,9 @@ function saveGML(network){
 		edges.push({source:source,target:target});
 	}
 
-	let gmlData = gml.GMLStringify({nodes:nodes,edges:edges});
+	let gmlData = gml.GMLStringify({nodes:nodes,edges:edges},{
+		nodeAttributes: Object.keys(nodes[0]),
+	});
 
 	return gmlData;
 

src/utilities/parsers/gml.js

@@ -163,13 +163,14 @@ function GMLStringify(graph, options) {
 
 		lines.push(indent1 + 'node [');
 
-		addAttribute('id', node.id, indent2);
-		addAttribute('label', node.label, indent2);
+		// addAttribute('id', node.id, indent2);
+		// addAttribute('label', node.label, indent2);
 
 		if (getNodeAttributes) {
-			forIn(getNodeAttributes(node) || {}, function (key, value) {
+			// getNodeAttributes
+			getNodeAttributes.forEach(function (key) {
 
-				addAttribute(key, value, indent2);
+				addAttribute(key, node[key], indent2);
 			});
 		}
 
@@ -182,12 +183,12 @@ function GMLStringify(graph, options) {
 
 		addAttribute('source', edge.source, indent2);
 		addAttribute('target', edge.target, indent2);
-		addAttribute('label', edge.label, indent2);
+		// addAttribute('label', edge.label, indent2);
 
 		if (getEdgeAttributes) {
-			forIn(getEdgeAttributes(edge) || {}, function (key, value) {
+			getEdgeAttributes.forEach(function (key) {
 
-				addAttribute(key, value, indent2);
+				addAttribute(key, edge[key], indent2);
 			});
 		}