Multiple events/locations can now be highlighted at the same time; cluster by... (ca0c07c1) · Commits · born / ri-visualization

client/js/controllers/vis-general.js

+61 −2

Original line number	Diff line number	Diff line
		@@ -2,6 +2,7 @@ angular
		.module('kg-app')
		.run(function($rootScope) {
		$rootScope.vissettings = {settingsview: true, visview: false, query: "", ownfile: true, paperdatafile: false, otherdatafile: false, fileIsRead: false, addEdgeValue: false, addCentrality: false, degreeCentrality: true, eigenvectorCentrality: false, addEventYears: false, showUnconnectedNodes: false, groupByGender: true, degree: 1, minDegree: true, equalDegree: false, maxDegree: false, count: 1, minCount: true, equalCount: false, maxCount: false, selectAllIssuers: false, physicsEnabled: true, networkLocked: false};
		$rootScope.search = {highlighted:[]};
		})
		.controller('VissuiteController', function($rootScope, $scope, $sce, $filter, $http, $timeout, $q, GraphUtils, FileSaver, FileUploader) {
		// Here, we want to save settings
		@@ -335,6 +336,8 @@ angular
		}
		});

		$scope.allnobilitytitles = [];
		$scope.titletocluster = "";
		angular.forEach(presentNodes, function(value){
		// Only apply node dropout for non-initial persons
		if( $scope.selectedpersons.indexOf(value.id) == -1 ){
		@@ -352,6 +355,8 @@ angular
		var nodeObject = {id: value.id, nodetype: value.nodetype};
		nodeObject.label = value.id;
		nodeObject.title = value.id;
		nodeObject.nobilityTitles = Object.keys(value.titles);
		$scope.allnobilitytitles.push.apply($scope.allnobilitytitles, Object.keys(value.titles));
		if( $scope.selectedpersons.indexOf(value.id) != -1 ){
		nodeObject.font = "14px arial red";
		}
		@@ -368,6 +373,7 @@ angular
		var nodeObject = {id: value.id, nodetype: value.nodetype};
		nodeObject.label = value.id;
		nodeObject.title = value.id;
		nodeObject.nobilityTitles = [];
		if( $scope.selectedpersons.indexOf(value.id) != -1 ){
		nodeObject.font = "14px arial red";
		}
		@@ -382,6 +388,10 @@ angular
		});
		}

		$scope.allnobilitytitles = $scope.allnobilitytitles.filter(function(item, pos, self) {
		return self.indexOf(item) == pos;
		});

		//console.log(edgeArr);

		var newRelationsToCounts = {}; // e.g. {gebietet: 10, teilt: 5}
		@@ -1130,11 +1140,24 @@ angular
		});
		}

		$scope.searchHighlight = function(type, attribute){
		$scope.search = $rootScope.search;
		$scope.searchHighlight = function(attribute){
		console.log(attribute);
		if( $scope.search.highlighted.indexOf(attribute) !== -1 ){
		$scope.search.highlighted.splice($scope.search.highlighted.indexOf(attribute),1);
		}
		else{
		$scope.search.highlighted.push(attribute);
		}
		highlightEdges();
		}

		function highlightEdges(){
		var edgesToSelect = [];
		var connectedpeople = [];
		angular.forEach(edges.get(), function(value, key){
		if( ( type == "event" && value.title != attribute ) \|\| ( type == "location" && value.attributes.location.indexOf(attribute) == -1 ) ){
		angular.forEach($scope.search.highlighted, function(value2, key2){
		if( value.attributes.location.indexOf(value2) == -1 && value2 !== value.title ){
		value.color.color = "#cccccc";
		}
		else{
		@@ -1146,6 +1169,7 @@ angular
		connectedpeople.push(value.to);
		}
		}
		})
		});
		network.selectEdges(edgesToSelect);
		edges.update(edges.get());
		@@ -1378,6 +1402,41 @@ angular
		}
		}

		$scope.$watch('titletocluster', function(newVal, oldVal){
		if( newVal != oldVal ){
		if( network.isCluster(oldVal) ){
		network.openCluster(oldVal);
		$scope.stats.numOfClusters = $scope.stats.numOfClusters - 1;
		}
		clusterByTitle()
		}
		});

		function clusterByTitle(){
		var clusteroptions = {
		joinCondition:function(nodeOptions) {
		if( !network.isCluster(nodeOptions.label) ){
		return nodeOptions.nobilityTitles.indexOf($scope.titletocluster) !== -1;
		}
		},
		clusterNodeProperties: {id: $scope.titletocluster, borderWidth: 1, shape: 'database', label: $scope.titletocluster}
		}
		console.log(clusteroptions);
		if( nodes.get().length > 150 \|\| edges.get().length > 300 ){
		network.setOptions({physics:{enabled: true}});
		network.clustering.cluster(clusteroptions);
		setTimeout(function(){
		network.setOptions({physics:{enabled: false}});
		}, 2000);
		}
		else{
		network.clustering.cluster(clusteroptions);
		}
		if( network.isCluster($scope.titletocluster) ){
		$scope.stats.numOfClusters = $scope.stats.numOfClusters + 1;
		}
		}

		$scope.closeClusterOverlay = function(){
		$scope.clustering.selected = false;
		}

index.html

+7 −7

Original line number	Diff line number	Diff line
		@@ -297,19 +297,19 @@
		<ul class="drawer-nav">
		<li ng-if="vissettings.addCentrality != true">Select Minimum Degree</li>
		<li><rzslider ng-if="slider.isVisible && vissettings.addCentrality != true" rz-slider-model="slider.value" rz-slider-options="slider.options"></rzslider></li>
		<li ng-if="vissettings.addCentrality == true"><hr class="style-one" /></li>
		<li ng-if="vissettings.addCentrality == true">Select Centrality</li>
		<li ng-if="vissettings.addCentrality == true"><label class="inline-radiobox"><input name="centralitymeasure2" type="radio" ng-model="vissettings.degreeCentrality" ng-value="true" ng-click="setNodeDegree();" required> Degree Centrality</label> <label class="inline-radiobox"><input name="centralitymeasure2" type="radio" ng-model="vissettings.eigenvectorCentrality" ng-value="true" ng-click="setNodeEigenvector();" required> Eigenvector Centrality</label></li>
		<li><hr class="style-one" /></li>
		<li><label class="checkbox-inline"><input type="checkbox" ng-model="vissettings.physicsEnabled" ng-change="togglePhysics();"> Enable physics</label></li>
		<li><label class="checkbox-inline"><input type="checkbox" ng-model="vissettings.networkLocked" ng-change="toggleNetworkLock();"> Lock network</label></li>
		<li ng-if="vissettings.addCentrality == true"><label class="inline-radiobox"><input name="centralitymeasure2" type="radio" ng-model="vissettings.degreeCentrality" ng-value="true" ng-click="setNodeDegree();" required> Degree Centrality</label> <label class="inline-radiobox"><input name="centralitymeasure2" type="radio" ng-model="vissettings.eigenvectorCentrality" ng-value="true" ng-click="setNodeEigenvector();" required> Eigenvector Centrality</label></li>
		</ul>
		<hr class="style-one" />
		</ul>
		<form name="clusterform" ng-submit="clusterBy()">
		<fieldset>
		<ul class="drawer-nav">
		<li>Cluster By: <input type="text" spellcheck="false" class="form-control" placeholder="term1, term2, term3 ..." ng-model="clustering.query"></input></li>
		<li><a type="submit" ng-disabled="clustering.query == ''" class="btn btn-default btn-md" ng-click="clusterBy()">Cluster</a></li>
		<li><select class="form-control input-sm" ng-model="titletocluster" ng-options="x for x in allnobilitytitles"></select></li>
		</ul>
		</fieldset>
		</form>
		@@ -348,8 +348,8 @@
		<div class="vis-search">
		<table class="table table-bordered no-bottom-margin" at-table at-list="events">
		<tbody class="text-left">
		<tr ng-click="searchHighlight('event',item.title);" ng-mouseover="hoverActive=true" ng-mouseleave="hoverActive=false" ng-style="hoverActive ? {'background-color':'#c7c9c9'} : {}">
		<td>{{item.title}} ({{item.number}})</td>
		<tr ng-click="searchHighlight(item.title);" ng-mouseover="hoverActive=true" ng-mouseleave="hoverActive=false" ng-style="hoverActive ? {'background-color':'#c7c9c9'} : {}">
		<td>{{item.title}} ({{item.number}}) <span ng-if="search.highlighted.indexOf(item.title) != -1" class="pull-right"><span class="glyphicon glyphicon-ok"></span></td>
		</tr>
		</tbody>
		</table>
		@@ -364,8 +364,8 @@
		<div class="vis-search">
		<table class="table table-bordered no-bottom-margin" at-table at-list="locations">
		<tbody class="text-left">
		<tr ng-click="searchHighlight('location',item.title);" ng-mouseover="hoverActive=true" ng-mouseleave="hoverActive=false" ng-style="hoverActive ? {'background-color':'#c7c9c9'} : {}">
		<td>{{item.title}} ({{item.number}})</td>
		<tr ng-click="searchHighlight(item.title);" ng-mouseover="hoverActive=true" ng-mouseleave="hoverActive=false" ng-style="hoverActive ? {'background-color':'#c7c9c9'} : {}">
		<td>{{item.title}} ({{item.number}}) <span ng-if="search.highlighted.indexOf(item.title) != -1" class="pull-right"><span class="glyphicon glyphicon-ok"></span></td>
		</tr>
		</tbody>
		</table>