Commit 1a423c73 authored by leoborn's avatar leoborn
Browse files

[vissuite] bug fixes

parent 36beaeba

visualization/client/js/controllers/vis-general.js

+66 −40
Original line number Diff line number Diff line 
angular

    .module('hch-app')

    .run(function($rootScope) {

        $rootScope.vissettings = {settingsview: true, visview: false, fileIsRead: false, addCentrality:false, addEventYears: false, physicsEnabled: true, networkLocked: false, minCount: 1};

        $rootScope.vissettings = {settingsview: true, visview: false, fileIsRead: false, addCentrality:false, addEventYears: false, physicsEnabled: true, networkLocked: false, minCount: 1, dropdescriptionnodes: false};

        $rootScope.search = {query: ""};

        $rootScope.yearslider = {

            minValue: 0,
@@ -66,18 +66,6 @@ angular 
            }

        }



        $scope.node_shape_combinations = [];

        for( var i = 0; i < $scope.special_node_types.length; i++ ){

            var node_type_1 = $scope.special_node_types[i];

            if( node_type_1 != "Trial" ){

                for( var j = i + 1; j < $scope.special_node_types.length; j++ ){

                    var node_type_2 = $scope.special_node_types[j];

                    var tuple = [node_type_1, node_type_2];

                    $scope.node_shape_combinations.push(tuple);

                }

            }

        }



        $scope.node_type_to_counts = {};



        var uploader = $scope.uploader = new FileUploader({
@@ -152,18 +140,6 @@ angular 
            reader.readAsText(item._file);

            reader.onloadend = function(){

                $scope.filecontents = JSON.parse(reader.result);

                var map_of_categories = {};

                for( var i = 0; i < $scope.filecontents[$scope.json_mapping.nodes].length; i++){

                    var node = $scope.filecontents[$scope.json_mapping.nodes][i];

                    if( "category" in node[$scope.json_mapping.node_attributes] ){

                        var label = node[$scope.json_mapping.node_label];

                        var category = node[$scope.json_mapping.node_attributes].category;

                        var categoryObject = {label: label, category: category};

                        if( !$scope.category_data.includes(categoryObject) ) {

                            $scope.category_data.push(categoryObject)

                        }

                    }

                }

            }

            item.isSuccess = true;

            $scope.vissettings.fileIsRead = true;
@@ -177,6 +153,20 @@ angular 
        $scope.yearslider = $rootScope.yearslider;



        $scope.startVisualization = function(){

            $scope.node_shape_combinations = [];

            for( var i = 0; i < $scope.special_node_types.length; i++ ){

                var node_type_1 = $scope.special_node_types[i];

                if( node_type_1 != "Trial" ){

                    for( var j = i + 1; j < $scope.special_node_types.length; j++ ){

                        var node_type_2 = $scope.special_node_types[j];

                        if( $scope.vissettings.dropdescriptionnodes == false || ($scope.vissettings.dropdescriptionnodes == true && node_type_1 != "Description" && node_type_2 != "Description") ){

                            var tuple = [node_type_1, node_type_2];

                            $scope.node_shape_combinations.push(tuple);

                        }

                    }

                }

            }



            $scope.vissettings.settingsview = false;

            $scope.vissettings.visview = true;
@@ -210,7 +200,8 @@ angular 
                var count = edgeArr.reduce(function(n, val) {

                    return n + (val.from === value.id || val.to === value.id);

                }, 0);

                var nodeObject = {id: value.id, label: value[$scope.json_mapping.node_label], title: value[$scope.json_mapping.node_label], num_of_connections: count, attributes: value[$scope.json_mapping.node_attributes], color: { background: '#990500', highlight: { background: '#ff8480' } }, value: 20 };

                var nodeObject = {id: value.id, label: value[$scope.json_mapping.node_label], label_original: value[$scope.json_mapping.node_label], title: value[$scope.json_mapping.node_label], num_of_connections: count, attributes: value[$scope.json_mapping.node_attributes], color: { background: '#990500', highlight: { background: '#ff8480' } }, value: 20 };

                if( $scope.vissettings.dropdescriptionnodes == false || ($scope.vissettings.dropdescriptionnodes == true && nodeObject.label != "Description") ){

                    if( nodeObject.label in $scope.node_shape_mapping ){

                        nodeObject.shape = $scope.node_shape_mapping[nodeObject.label];

                        if( $scope.vissettings.addCentrality == false ){
@@ -252,6 +243,7 @@ angular 
                        nodeArr.push(nodeObject);

                    }

                }

            }

            nodes.add(nodeArr);



            $scope.results = nodeArr;
@@ -348,7 +340,6 @@ angular 
            var originalNodes = angular.copy(nodes);

            var originalEdges = angular.copy(edges);





            function getTrialNodes(node_id){

                var found = originalEdges.get().filter(function(val) {

                    return (val.from === node_id || val.to === node_id);
@@ -403,9 +394,16 @@ angular 
                    $scope.resetToOriginal();

                    return;

                }

                nodes.clear();

                edges.clear();

                nodes.add(originalNodes.get());

                edges.add(originalEdges.get());

                $scope.selection.combo = [];

                $scope.selection.active = false;

                

                // This gets all persons

                var allPersons = originalNodes.get().filter(function(val) {

                    return $rootScope.special_node_types.indexOf(val.label) === -1;

                    return $rootScope.special_node_types.indexOf(val.label_original) === -1;

                });

                var newNodes = [];

                var newEdges = [];
@@ -415,6 +413,7 @@ angular 
                        var trialNodeIds = getTrialNodes(tmpPerson.id);

                        var tmpConstructedNodes = constructNodes(trialNodeIds, tmpPerson.id);

                        for( var j = 0; j < tmpConstructedNodes.length; j++ ){

                            if( typeof tmpConstructedNodes[j] !== 'undefined' ){

                                var found_node = $filter('filter')(newNodes, {id: tmpConstructedNodes[j].id}, true);

                                if( found_node.length == 0 ){

                                    newNodes.push(tmpConstructedNodes[j]);
@@ -422,7 +421,7 @@ angular 
                            }

                        }

                    }

                console.log(newNodes);

                }

                setTimeout(function () {document.getElementById('loadingBar').style.display = 'block';}, 500);

                nodes.clear();

                nodes.add(newNodes);
@@ -432,13 +431,13 @@ angular 
                updateStats();

            }



            var network = new vis.Network(container, data, options);

            var originalNetwork = angular.copy(network);



            if( $scope.vissettings.minCount > 1 ){

                $scope.restructureGraph(false);

            }



            var network = new vis.Network(container, data, options);

            var originalNetwork = angular.copy(network);



            // Fit the network to screen after loading network from file

            // This is because stored positions might not reflect dimensions of client device

            network.once("afterDrawing", function() {
@@ -636,7 +635,7 @@ angular 


            $scope.hidden = { unconnected: false, groups: [] };

            $scope.$watch('yearslider', function(newVal, oldVal){

                if( newVal !== oldVal ){

                if( $scope.vissettings.visview == true && newVal !== oldVal ){

                    // unset overlay because it might be that selected node gets hidden

                    $scope.node.selected = false;

                    $scope.node.info = {};
@@ -826,12 +825,12 @@ angular 
                        if( !numberOfNodes ){

                            numOfNodes++;

                        }

                    }

                    if( value.label in $scope.node_type_to_counts ){

                        $scope.node_type_to_counts[value.label] = $scope.node_type_to_counts[value.label] + 1;

                        if( value.label_original in $scope.node_type_to_counts ){

                            $scope.node_type_to_counts[value.label_original] = $scope.node_type_to_counts[value.label_original] + 1;

                        }

                        else{

                        $scope.node_type_to_counts[value.label] = 1;

                            $scope.node_type_to_counts[value.label_original] = 1;

                        }

                    }

                });

                var allEdges = edges.get();
@@ -864,7 +863,22 @@ angular 
                $scope.highlighting.active = true;

            }



            $scope.selection = {combo: []};

            $scope.dropDescriptionNodes = function(){

                var updateNodes = [];

                angular.forEach(nodes.get(), function(nodeVal, nodeKey){

                    if( nodeVal.label_original == "Description" ){

                        nodeVal['hidden'] = true;

                    }

                    else{

                        nodeVal['hidden'] = false;

                    }

                    updateNodes.push(nodeVal);

                });

                nodes.update(updateNodes);

                updateStats();

            }



            $scope.selection = {combo: [], active: false};



            $scope.isComboSelected = function(combo){

                if( combo[0] == $scope.selection.combo[0] && combo[1] == $scope.selection.combo[1] ){
@@ -875,8 +889,13 @@ angular 


            $scope.resetToOriginal = function(){

                network.setOptions({ physics: { enabled: false } });

                $scope.vissettings.minCount = 1;

                $scope.vissettings.physicsEnabled = false;

                $scope.selection.combo = [];

                $scope.selection.active = false;

                if( $scope.vissettings.addEventYears == true ){

                    $scope.yearslider.options.disabled = false;

                }

                setTimeout(function () {document.getElementById('loadingBar').style.display = 'block';}, 500);

                nodes.clear();

                edges.clear();
@@ -888,6 +907,12 @@ angular 


            $scope.mapNodeTypes = function(node_type_1, node_type_2){

                $scope.selection.combo = [node_type_1, node_type_2];

                $scope.selection.active = true;

                if( $scope.vissettings.addEventYears == true ){

                    $scope.yearslider.options.disabled = true;

                }

                $scope.vissettings.minCount = 1;



                var newNodes = [];

                var newEdges = [];
@@ -921,8 +946,9 @@ angular 
                            var found = $filter('filter')(newNodes, {id: associated_node_types[k].id}, true);

                            if( found.length == 0 ){

                                //var newNode = {id: associated_node_types[k].id, label: associated_node_types[k].title, title: associated_node_types[k].title, attributes: associated_node_types[k].attributes };

                                var newNode = {id: associated_node_types[k].id, label: associated_node_types[k].label, title: associated_node_types[k].title, attributes: associated_node_types[k].attributes, shape: $scope.node_shape_mapping[associated_node_types[k].label]};

                                var color = angular.copy($scope.node_color_mapping[associated_node_types[k].label]);

                                //var newNode = {id: associated_node_types[k].id, label: associated_node_types[k].label, title: associated_node_types[k].title, attributes: associated_node_types[k].attributes, shape: $scope.node_shape_mapping[associated_node_types[k].label]};

                                var newNode = {id: associated_node_types[k].id, label: associated_node_types[k].title, label_original: associated_node_types[k].label, title: associated_node_types[k].title, attributes: associated_node_types[k].attributes, shape: $scope.node_shape_mapping[associated_node_types[k].label_original]};

                                var color = angular.copy($scope.node_color_mapping[associated_node_types[k].label_original]);

                                newNode.color = color;

                                newNodes.push(newNode);

                            }

visualization/index.html

+6 −3
Original line number Diff line number Diff line
@@ -156,6 +156,9 @@ 
                        <p>

                            <label class="inline-checkbox"><input type="checkbox" ng-model="vissettings.addEventYears" ng-true-value="true" ng-false-value="false"> Add time slider <span>[<a class="help" uib-popover="Adds a slider that allows to filter graph based on dates." popover-trigger="'mouseenter'" popover-title="Help" popover-placement="right">?</a>]</span></label>

                        </p>

                        <p>

                            <label class="inline-checkbox"><input type="checkbox" ng-model="vissettings.dropdescriptionnodes" ng-true-value="true" ng-false-value="false"> Drop description nodes <span>[<a class="help" uib-popover="Useful on very large and/or unsimplified graphs." popover-trigger="'mouseenter'" popover-title="Help" popover-placement="right">?</a>]</span></label>

                        </p>

                        <p>

                            <label>Minimum count of connections for persons:</label><br>

                            <input type="text" class="form-control number-input" ng-model="vissettings.minCount"></input>
@@ -182,7 +185,7 @@ 
                                <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>

                                <hr class="style-one" />

                                <li ng-repeat="(k,v) in node_shape_mapping"><div class="circle-container wrap"><b>{{k}} (count: {{node_type_to_counts[k] || 0 }})</b>: {{v}} <span class="circle" ng-style="{'background-color':node_color_mapping[k].background}"></span> <button class="btn btn-xs btn-primary" ng-click="highlightNodeType(k)">highlight</button></div></li>

                                <li ng-repeat="(k,v) in node_shape_mapping"><div class="circle-container wrap"><b>{{k}} (count: {{node_type_to_counts[k] || 0 }})</b>: {{v}} <span class="circle" ng-style="{'background-color':node_color_mapping[k].background}"></span> <button class="btn btn-xs btn-primary" ng-click="highlightNodeType(k)">highlight</button>  <button ng-if="k=='Description'" class="btn btn-xs btn-danger" ng-click="dropDescriptionNodes()">drop</button></div></li>

                                <hr class="style-one" />

                                <li>Minimum count of connections for persons:

                                <input type="text" class="form-control number-input" ng-model="vissettings.minCount"></input></li>
@@ -278,10 +281,10 @@ 
                    </div>

                    <div ng-if="vissettings.addEventYears == true" class="yearslider-overlay">

                        <div id="yearslider-overlay">

                            <rzslider class="custom-slider" rz-slider-model="yearslider.minValue" rz-slider-high="yearslider.maxValue" rz-slider-options="yearslider.options"></rzslider>

                            <rzslider rz-slider-disabled="selection.active" class="custom-slider" rz-slider-model="yearslider.minValue" rz-slider-high="yearslider.maxValue" rz-slider-options="yearslider.options"></rzslider>

                        </div>

                        <div id="animate-slider" ng-if="yearslider.isVisible" class="text-center">

            				<span ng-if="animation.ongoing != true"><a class="btn btn-xs btn-success" ng-click="animateSlider()"><span class="glyphicon glyphicon-play"></span> Start animation ({{animation.estimatedTime}}s)</a></span>

            				<span ng-if="animation.ongoing != true"><a ng-disabled="selection.active" class="btn btn-xs btn-success" ng-click="animateSlider()"><span class="glyphicon glyphicon-play"></span> Start animation ({{animation.estimatedTime}}s)</a></span>

            				<a ng-if="animation.ongoing == true" class="btn btn-xs btn-danger" ng-click="stopAnimation()"><span class="glyphicon glyphicon-stop"></span> Stop animation</a>

        				</div>

                    </div>