implemented generation of network map of address history, not finished

web/views/addressNetwork/addressNetwork.html

@@ -0,0 +1,29 @@
+<div class="container">
+    <div class="row">
+        <div class="col-sm-3">
+            <div class="panel-heading c_blueGrey300">
+                <h3 class="panel-title">All addresses</h3>
+            </div>
+            <div class="panel-body" style="max-height: 500px;overflow-y: scroll;">
+                <div class="form-group label-floating">
+                    <input ng-model="filterAddress" abmFormControl class="form-control" placeholder="Filter" type="text">
+                </div>
+                <div ng-click="getAddressNetwork(node)" class="list-group-item" ng-repeat="node in addresses | filter: filterAddress">
+                    <div class="row-content">
+                        <p class="list-group-item-text">{{node.id}}</p>
+
+                        <!--<p class="list-group-item-text">Maecenas sed diam eget risus varius blandit.</p>-->
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-sm-9">
+            <div class="panel-heading c_blueGrey300">
+                <h3 class="panel-title">Network</h3>
+            </div>
+            <div class="panel-body">
+                <div id="mynetwork" style="height:800px;"></div>
+            </div>
+        </div>
+    </div>
+</div>

web/views/addressNetwork/addressNetwork.js

@@ -0,0 +1,104 @@
+'use strict';
+
+angular.module('app.addressNetwork', ['ngRoute'])
+
+    .config(['$routeProvider', function($routeProvider) {
+        $routeProvider.when('/addressNetwork', {
+            templateUrl: 'views/addressNetwork/addressNetwork.html',
+            controller: 'AddressNetworkCtrl'
+        });
+    }])
+
+    .controller('AddressNetworkCtrl', function($scope, $http, $routeParams) {
+        $scope.data = [];
+        $scope.addresses;
+        $scope.nodes = [];
+        $scope.edges = [];
+        $scope.selectedNode = {};
+        var nodes, edges, container, network;
+        var options = {
+            layout: {
+                improvedLayout: false
+            },
+            interaction: {
+                hover: true
+            },
+            physics: {
+                stabilization: false,
+                //enabled: false
+            }
+        };
+
+
+        $scope.showMap = function() {
+            var nodes = $scope.nodes;
+            var edges = $scope.edges;
+
+            var container = document.getElementById('mynetwork');
+            var data = {
+                nodes: nodes,
+                edges: edges
+            };
+            network = new vis.Network(container, data, options);
+            network.on("click", function(params) {
+                params.event = "[original event]";
+                //$scope.selectedNode = JSON.stringify(params, null, 4);
+                $scope.selectedNode = params;
+                console.log($scope.selectedNode);
+                console.log($scope.selectedNode.nodes);
+                var options = {
+                    // position: {x:positionx,y:positiony}, // this is not relevant when focusing on nodes
+                    scale: 1,
+                    offset: {
+                        x: 0,
+                        y: 0
+                    },
+                    animation: {
+                        duration: 500,
+                        easingFunction: "easeInOutQuad"
+                    }
+                };
+                network.focus($scope.selectedNode.nodes[0], options);
+                //console.log('click event, getNodeAt returns: ' + this.getNodeAt(params.pointer.DOM));
+            });
+        };
+        $http.get(urlapi + 'alladdresses')
+            .then(function(data, status, headers, config) {
+                console.log('data success');
+                console.log(data);
+                $scope.addresses = data.data;
+            }, function(data, status, headers, config) {
+                console.log('data error');
+            });
+
+        $scope.getAddressNetwork = function(address) {
+            console.log(address);
+            $http.get(urlapi + 'address/network/' + address.id)
+                .then(function(data, status, headers, config) {
+                    console.log('data success');
+                    console.log(data);
+                    $scope.nodes = data.data.nodes;
+                    $scope.edges = data.data.edges;
+                    $scope.showMap();
+                }, function(data, status, headers, config) {
+                    console.log('data error');
+                });
+        };
+
+
+        $scope.focusNode = function(node) {
+            var options = {
+                // position: {x:positionx,y:positiony}, // this is not relevant when focusing on nodes
+                scale: 1,
+                offset: {
+                    x: 0,
+                    y: 0
+                },
+                animation: {
+                    duration: 500,
+                    easingFunction: "easeInOutQuad"
+                }
+            };
+            network.focus(node.id, options);
+        };
+    });

web/views/navbar.html

@@ -1,43 +1,44 @@
 <div ng-controller="NavbarCtrl">
-<div class="navbar c_grey800">
-    <div class="container-fluid">
-        <div class="navbar-header">
-            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
+    <div class="navbar c_grey800">
+        <div class="container-fluid">
+            <div class="navbar-header">
+                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
-            <a class="navbar-brand" href="/">goBlockchainDataAnalysis</a>
-        </div>
-        <div class="navbar-collapse collapse navbar-responsive-collapse">
-            <ul class="nav navbar-nav">
-                <li class="active"><a href="#!/network">Network</a></li>
-                <li><a href="#!/sankey">Sankey diagram</a></li>
-                <li><a href="javascript:void(0)">Timeline</a></li>
-            </ul>
-            <form class="navbar-form navbar-left">
-                <div class="form-group">
-                    <input class="form-control col-md-8" placeholder="Search" type="text">
-                </div>
-            </form>
-            <ul class="nav navbar-nav navbar-right">
-                <li><a href="https://github.com/arnaucode/goBlockchainDataAnalysis" target="_blank">Info</a></li>
-                <li class="dropdown">
-                    <a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Settings
+                <a class="navbar-brand" href="/">goBlockchainDataAnalysis</a>
+            </div>
+            <div class="navbar-collapse collapse navbar-responsive-collapse">
+                <ul class="nav navbar-nav">
+                    <li class="active"><a href="#!/network">Network</a></li>
+                    <li><a href="#!/addressNetwork">Address Network</a></li>
+                    <li><a href="#!/sankey">Sankey diagram</a></li>
+                    <li><a href="javascript:void(0)">Timeline</a></li>
+                </ul>
+                <form class="navbar-form navbar-left">
+                    <div class="form-group">
+                        <input class="form-control col-md-8" placeholder="Search" type="text">
+                    </div>
+                </form>
+                <ul class="nav navbar-nav navbar-right">
+                    <li><a href="https://github.com/arnaucode/goBlockchainDataAnalysis" target="_blank">Info</a></li>
+                    <li class="dropdown">
+                        <a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Settings
             <b class="caret"></b></a>
-                    <ul class="dropdown-menu">
-                        <li><a href="javascript:void(0)">Action</a></li>
-                        <li><a href="javascript:void(0)">Another action</a></li>
-                        <li><a href="javascript:void(0)">Something else here</a></li>
-                        <li class="divider"></li>
-                        <li><a href="javascript:void(0)">Separated link</a></li>
-                    </ul>
-                </li>
-            </ul>
+                        <ul class="dropdown-menu">
+                            <li><a href="javascript:void(0)">Action</a></li>
+                            <li><a href="javascript:void(0)">Another action</a></li>
+                            <li><a href="javascript:void(0)">Something else here</a></li>
+                            <li class="divider"></li>
+                            <li><a href="javascript:void(0)">Separated link</a></li>
+                        </ul>
+                    </li>
+                </ul>
+            </div>
         </div>
     </div>
-</div>
-<!--
+    <!--
 <div ng-click="goBack()" class="btn"><span class="glyphicon glyphicon-arrow-left"></span> Back</div>
 -->
 </div>

web/views/network/network.html

@@ -1,6 +1,26 @@
 <div class="container">
     <div class="row">
-        <div class="col-sm-12">
+        <div class="col-sm-3">
+            <div class="panel-heading c_blueGrey300">
+                <h3 class="panel-title">Nodes</h3>
+            </div>
+            <div class="panel-body" style="max-height: 300px;overflow-y: scroll;">
+                <div ng-click="focusNode(node)" class="list-group-item" ng-repeat="node in nodes">
+                    <div class="row-content">
+                        <p class="list-group-item-text">{{node.id}}</p>
+
+                        <!--<p class="list-group-item-text">Maecenas sed diam eget risus varius blandit.</p>-->
+                    </div>
+                </div>
+            </div>
+            <div class="panel-heading c_blueGrey300">
+                <h3 class="panel-title">Selected node</h3>
+            </div>
+            <div class="panel-body" style="max-height: 200px;overflow-y: scroll;">
+                {{selectedNode.nodes}}
+            </div>
+        </div>
+        <div class="col-sm-9">
             <div class="panel-heading c_blueGrey300">
                 <h3 class="panel-title">Network</h3>
             </div>

web/views/network/network.js

@@ -13,16 +13,19 @@ angular.module('app.network', ['ngRoute'])
         $scope.data = [];
         $scope.nodes = [];
         $scope.edges = [];
-        var nodes, edges, container;
+        $scope.selectedNode = {};
+        var nodes, edges, container, network;
         var options = {
             layout: {
                 improvedLayout: false
+            },
+            interaction: {
+                hover: true
+            },
+            physics: {
+                stabilization: false,
+                //enabled: false
             }
-            /*,
-                physics:{
-                    //stabilization: false,
-                   // enabled: false
-                }*/
         };
 
 
@@ -35,7 +38,28 @@ angular.module('app.network', ['ngRoute'])
                 nodes: nodes,
                 edges: edges
             };
-            var network = new vis.Network(container, data, options);
+            network = new vis.Network(container, data, options);
+            network.on("click", function(params) {
+                params.event = "[original event]";
+                //$scope.selectedNode = JSON.stringify(params, null, 4);
+                $scope.selectedNode = params;
+                console.log($scope.selectedNode);
+                console.log($scope.selectedNode.nodes);
+                var options = {
+                    // position: {x:positionx,y:positiony}, // this is not relevant when focusing on nodes
+                    scale: 1,
+                    offset: {
+                        x: 0,
+                        y: 0
+                    },
+                    animation: {
+                        duration: 500,
+                        easingFunction: "easeInOutQuad"
+                    }
+                };
+                network.focus($scope.selectedNode.nodes[0], options);
+                //console.log('click event, getNodeAt returns: ' + this.getNodeAt(params.pointer.DOM));
+            });
         };
 
         $http.get(urlapi + 'map')
@@ -50,4 +74,20 @@ angular.module('app.network', ['ngRoute'])
                 console.log('data error');
             });
 
+
+        $scope.focusNode = function(node) {
+            var options = {
+                // position: {x:positionx,y:positiony}, // this is not relevant when focusing on nodes
+                scale: 1,
+                offset: {
+                    x: 0,
+                    y: 0
+                },
+                animation: {
+                    duration: 500,
+                    easingFunction: "easeInOutQuad"
+                }
+            };
+            network.focus(node.id, options);
+        };
     });