Commit cdec9cc2 authored by Fintan Mc Gee's avatar Fintan Mc Gee

added basic zoom anbd pan to nodelink view , only enabled when lassoo is not

parent 80e469ac
......@@ -139,6 +139,7 @@
<script src="js/controllers/hivePlotController.js"></script>
<script src="js/controllers/aspectSelectionController.js"></script>
<script src="js/controllers/sideMenuController.js"></script>
<script src="js/controllers/temporalLayeringController.js"></script>
<!-- Font-->
<!--Directives-->
......@@ -166,6 +167,7 @@
<script src="./js/directives/attributeTimeHistogramDirective.js"></script>
<script src="./js/directives/edgeHistogramDirective.js"></script>
<script src="./js/directives/svgLabelsDirective.js"></script>
<script src="./js/directives/temporalLayeringHistogramDirective.js"></script>
<!--Services-->
<script src="./js/services/multiLayerGraphService.js"></script>
<script src="./js/services/dataService.js"></script>
......
......@@ -418,18 +418,34 @@ input:checked + .customSlider:before {
fill: steelblue;
}
.
#pageOverlay {
#layerHistogramVis {
position: fixed;
display: block;
z-index: 3;
width: 70%; /* Full page Overlay*/
height: 65%;
top: 20%;
left: 15%;
right: 15%;
bottom: 15%;
background-color: #fff;
cursor: pointer;
}
.pageOverlay {
position: fixed;
display: block;
z-index: 3;
width: 50%; /* Full page Overlay*/
height: 50%;
top: 25%;
left: 25%;
right: 25%;
bottom: 25%;
width: 75%; /* Full page Overlay*/
height: 75%;
top: 12.5%;
left: 12.5%;
right: 12.5%;
bottom: 12.5%;%;
background-color: rgba(1.0,1.0,1.0,0.5);
cursor: pointer;
}
......
This diff is collapsed.
......@@ -5,6 +5,12 @@
<div style="position:relative;display:inline-block;width: 95%;">
<ng-include src="'./html/templates/warningMessage.html'"></ng-include>
<div>
<div id="pageOverlay" ng-show="model.showTemporalLayeringHistogram" class="pageOverlay">
<div nclass="centeredDiv">
<ng-include src="'./html/templates/temporalLayeringHistogram.html'"></ng-include>
</div>
</div>
</div>
<div class="centeredDiv">
<div class="row">
<div class="col-sm-2">
......@@ -40,6 +46,9 @@
<div class="col-sm-2">
<div class="btn btn-primary" ng-click="loadEntityData()">Load Data</div>
</div>
<div class="col-sm-2">
<div class="btn btn-primary" ng-click="showTemporalLayering()">Temporal Layering</div>
</div>
</div>
</div>
......
......@@ -4,7 +4,7 @@
<div style="position: relative;">
<div style="z-index: 1;" ng-controller="multipleLayersCtrl" class="centeredDiv">
<div style="z-index: 1;" ng-controller="layerComparisonCtrl" class="centeredDiv" ng-init="init()" style="overflow-x: scroll;")>
<div id="pageOverlay" ng-show="model.showOverlay">
<div id="pageOverlay" ng-show="model.showOverlay" class="pageOverlay">
<div class="row align-items-center pageOverlayRow">
<div class="col-md-1"></div>
<div class="col-md-2">
......
<!--/**************************************-->
<!--* temporalLayeringHistogram, .js-->
<!--* Functionality: Template that duisapls a barchart and configuration options
<!--* Created By : Fintan McGee (LIST)-->
<!--* Date: 17/11/2016-->
<!--********************************/-->
<div class="centeredDiv" ng-controller="temporalLayeringCtrl" ng-init="intialiseTimeAttributeNames()">
<div class ="centeredDiv" id="layerHistogramVis" >
</div>
<div class="centeredDiv">
<div class="row">
<div class="col-sm-4">
</div>
<div class="col-sm-2">
<div class="btn btn-primary" ng-click="">Create Selected Layers (TBD)</div>
</div>
<div class="col-sm-2">
<div class="btn btn-primary" ng-click="hideTemporalLayering()">Close</div>
</div>
<div class="col-sm-4">
</div>
</div>
</div>
<temporal-layering-histogram-directive clickfunc="highlight" labelfield="name" height = "200"></temporal-layering-histogram-directive>
</div>
\ No newline at end of file
......@@ -26,6 +26,7 @@ angular.module('blizaarModule.controllers')
$scope.model.showIntraLayerEdges = false;
$scope.model.showInterLayerEdges = false;
$scope.model.tempTagIndex = 0; // used to ensure that tmp tags are unique
$scope.showTemporalLayeringHistogram = false;
/**************************************
* initializeDHListView()
......@@ -536,10 +537,26 @@ angular.module('blizaarModule.controllers')
}
}
$scope.showTemporalLayering = function() {
graphLayeringService.setDHTemporalLayeringData();
$scope.model.showTemporalLayeringHistogram = true;
$scope.$broadcast('defineTemporalLayeringRequest');
}
$scope.hideTemporalLayering = function() {
$scope.model.showTemporalLayeringHistogram = false;
}
$scope.getShowTemporalLayering = function() {
return $scope.model.showTemporalLayeringHistogram;
}
$scope.getShowMasterLayer = function(){
return $scope.model.showMasterLayer;
......
......@@ -80,11 +80,11 @@ angular.module('blizaarModule.controllers')
};
$scope.updateAvailableNames = function() {
if( $scope.model.inputType == "Metabolite") {
/*if( $scope.model.inputType == "Metabolite") {
// currently there are way to many metabolite names....so for now we do not return the lsit
$scope.model.availableNames = [];
return;
}
}*/
metaDataService.getNodeNames( "Bio", $scope.model.inputType).then(function(d){
$scope.model.availableNames = [""].concat(d);
});
......
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
......@@ -14,7 +14,8 @@ angular.module('blizaarModule.services')
earliestFirstMentionDate: null,
latestFirstMentionDate: null,
earliestLastMentionedDate: null,
latestLastMentionedDate: null
latestLastMentionedDate: null,
temporalData:null
} ,
// Used to access to service values
doLayeringByGraphType : function(graphType, doLayout){
......@@ -787,6 +788,49 @@ angular.module('blizaarModule.services')
multiLayerGraphService.getGraph().induceLinksInLayer(temporalLayer);
dataService.updateLayerOnServer("induceLinksInLayer", temporalLayer);
});
},
/**************************************
* setTemporalLayeringData()
* Functionality: Creates layers based on any mention of a node , noides can appear in mukltipl periods
*
* Created By : Fintan McGee (LIST)
* Date:13/04/2019
*******************************/
setDHTemporalLayeringData: function() {
var masterLayer = multiLayerGraphService.getGraph();
var yearMap = {};
var temporalData = this._values.temporalData = [];
var countIndex = 0;
masterLayer.nodes.forEach(function(n) {
if(n.type==="resource") {
var resourceDate = n.start_date || n.end_date || n.date || null;
if (resourceDate) {
var nodeYear = new Date(resourceDate).getFullYear();
var nodeYearString = ""+ nodeYear;
if(!yearMap.hasOwnProperty(nodeYearString)){
yearMap[nodeYearString] = [];
}
yearMap[nodeYearString] .push({id:countIndex++, type: n.type,year:nodeYearString,resourceDate: resourceDate, name:n.name, uid:n.uid,});
temporalData.push({id:countIndex++, type: n.type,year:nodeYearString,resourceDate: resourceDate, name:n.name, uid:n.uid,})
var resourceNeighbours = masterLayer.getNeighbours(n);
resourceNeighbours.forEach(function(neighbourNode) {
yearMap[nodeYearString] .push({id:countIndex++, type: neighbourNode.type,year:nodeYearString,resourceDate: resourceDate, name:neighbourNode.name, uid:neighbourNode.uid});
temporalData.push({id:countIndex++, type: neighbourNode.type,year:nodeYearString,resourceDate: resourceDate, name:neighbourNode.name, uid:neighbourNode.uid})
}); // end resourceNeighbours.forEach
};
}
});
return temporalData;
},
getDHTemporalLayeringData: function() {
if(!this._values.temporalData || !this._values.temporalData.length) {
this.setDHTemporalLayeringData();
}
return this._values.temporalData;
}
};
}]);
\ No newline at end of file
......@@ -29,6 +29,7 @@ angular.module('blizaarModule.services')
//var keys = Object.keys(thisArea.database.data[0]);
var previousSelection = d3.selectAll(".selectedData");
// Reset the color of all dots
var temp = lasso.items();
lasso.items()
.style("fill", function (d) {
return d.colorValue || color(d.colorCategory);
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment