+ reload in Raport Graph

SE/se-lib/Route/UrlAction/BiAuditGraph.php.network-graph.js

@@ -319,6 +319,61 @@ var p5UI__NetworkGraph = createReactClass({
 		}
 	},
 
+	reloadGraph: function () {
+		if (this._network) {
+			// this._network.setData({ nodes: [], edges: [] });
+			// var edges = this._edges.getDataSet();
+			var networkFit = (function (network) {
+				var _network = network;
+				return function () {
+					DBG1 && console.log('DBG:networkFit');
+					_network.fit();
+				}
+			})(this._network);
+			// {
+			// 	var edges = this._edges.map(function(e) { return e; }); // DataSet to Array
+			// 	this._edges.clear();
+			// 	var animAddEdges = (function (this__edges, edges, wait) {
+			// 		return function (callback) {
+			// 			DBG1 && console.log('DBG:animAddEdges', { edges });
+			// 			if (edges.length > 0) {
+			// 				var edge = edges.pop();
+			// 				this__edges.add(edge);
+			// 				setTimeout(function () {
+			// 					animAddEdges(callback)
+			// 				}, wait);
+			// 			}
+			// 		}
+			// 	})(this._edges, edges, 10);
+			// 	animAddEdges(animAddEdges);
+			// }
+			{
+				var nodes = this._nodes.map(function(e) { return e; }); // DataSet to Array
+				this._nodes.clear();
+				var animAddNodes = (function (this__nodes, nodes, wait, onFinishCallback) {
+					return function (callback) {
+						DBG1 && console.log('DBG:animAddNodes', { nodes });
+						if (nodes.length > 0) {
+							var node = nodes.pop();
+							this__nodes.add(node);
+							setTimeout(function () {
+								animAddNodes(callback)
+							}, wait);
+						} else if (onFinishCallback) {
+							setTimeout(function () {
+								onFinishCallback()
+							}, 500);
+						}
+					}
+				})(this._nodes, nodes, 200, networkFit);
+				animAddNodes(animAddNodes);
+			}
+			// DBG1 && console.log('DBG: reloadGraph', { 'this._nodes': this._nodes, 'this._edges': this._edges, edges: edges });
+			// this._network.setData({ nodes: this._nodes, edges: this._edges });
+			// this._network.fit() // zoom out to fit container size
+		}
+	},
+
 	testOnClick1: function () {
 		TMP_COUNTER++;
 		this._nodes.add({ id: TMP_COUNTER, label: "Node " + TMP_COUNTER, value: TMP_COUNTER, level: 0 });
@@ -451,10 +506,16 @@ var p5UI__NetworkGraph = createReactClass({
 					'border': "1px solid #ddd",
 				},
 			}),
-			h('div', { className: "btn-group-vertical", style: { position: "absolute", right: 10, top: 10 } }, [
-				h('button', { onClick: this.incScale, className: "btn btn-xs btn-default" }, [ h('i', { className: "glyphicon glyphicon-plus" }) ]),
-				h('button', { onClick: this.fitToContainer, className: "btn btn-xs btn-default" }, [ "100%" ]),
-				h('button', { onClick: this.decScale, className: "btn btn-xs btn-default" }, [ h('i', { className: "glyphicon glyphicon-minus" }) ]),
+			h('div', { className: "", style: { position: "absolute", right: 10, top: 10 } }, [
+				h('div', { className: "btn-group-vertical", title: "Powiększenie" }, [
+					h('button', { onClick: this.incScale, className: "btn btn-xs btn-default" }, [ h('i', { className: "glyphicon glyphicon-plus" }) ]),
+					h('button', { onClick: this.fitToContainer, className: "btn btn-xs btn-default" }, [ "100%" ]),
+					h('button', { onClick: this.decScale, className: "btn btn-xs btn-default" }, [ h('i', { className: "glyphicon glyphicon-minus" }) ]),
+				]),
+				h('div', { style: { clear: "both", margin: 4 } }),
+				h('div', { className: "btn-group-vertical", style: { width: "100%" } }, [
+					h('button', { onClick: this.reloadGraph, className: "btn btn-xs btn-default", title: "Odśwież" }, [ h('i', { className: "glyphicon glyphicon-random" }) ]),
+				]),
 			]),
 			h('div', {}, [
 				h('button', { onClick: this.testOnClick1 }, [ "TEST 1 ", h('small', [], "(+ node)") ]),