Commit 398ba317 authored by Fintan Mc Gee's avatar Fintan Mc Gee

First version of temporal layer definition working

parent ba09a76c
......@@ -422,17 +422,17 @@ input:checked + .customSlider:before {
#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;
/*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;*/
}
......
......@@ -7,24 +7,65 @@
<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-12">
<div class="col-sm-2">
<div class="btn btn-primary" ng-click="hideTemporalLayering()">Close</div>
</div>
</div>
<div class="row">
<div class="col-sm-8">
<div class="row">
<div class="col-sm-12">
<div class ="centeredDiv" id="layerHistogramVis" > </div>
<temporal-layering-histogram-directive clickfunc="highlight" labelfield="name" height = "200"></temporal-layering-histogram-directive>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="btn btn-primary" ng-click="defineLayerBounds()">Define Layer</div>
</div>
</div>
</div>
<!--<div class="col-sm-1" > </div>-->
<div class="col-sm-4">
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-10" style="background: lightgrey;" >
<table class="table table-striped">
<tr>
<th class="info tr-options"> Start</th>
<th class="info tr-options"> End</th>
</tr>
<tr ng-repeat="bounds in model.definedLayerBounds track by $index">
<td>
{{bounds.start}}
</td>
<td>{{bounds.end}} </td>
</tr>
</table>
</div>
<div class="col-sm-1"></div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="btn btn-primary" ng-click="doTemporalLayering()">Do Layering (TBD)</div>
</div>
</div>
</div>
</div>
</div>
</div>
<temporal-layering-histogram-directive clickfunc="highlight" labelfield="name" height = "200"></temporal-layering-histogram-directive>
<!--<temporal-layering-histogram-directive clickfunc="highlight" labelfield="name" height = "200"></temporal-layering-histogram-directive>-->
</div>
\ No newline at end of file
......@@ -27,6 +27,12 @@ angular.module('blizaarModule.controllers')
$scope.model.doBinning = false; //if true binning will be perofmred regardless of edge count
$scope.model.binningActive = true; //true if binning is active dur to specification or the number of records
$scope.model.categoricalDataActive = false; //true if categroical data is being examined
$scope.model.definedLayerBounds = [];
$scope.model.currentLayerBounds = {};
$scope.getBarChartData = function (variableName, colorField, labelField,layer) {
var barData = graphLayeringService.getDHTemporalLayeringData();
......@@ -167,7 +173,30 @@ angular.module('blizaarModule.controllers')
};
$scope.defineLayerBounds = function() {
var validBounds = true;
if($scope.model.currentLayerBounds.start && $scope.model.currentLayerBounds.end) {
$scope.model.definedLayerBounds.forEach(function(existingBounds){
if(($scope.model.currentLayerBounds.start >= existingBounds.start && $scope.model.currentLayerBounds.start <= existingBounds.end) // start is within another extent
|| ($scope.model.currentLayerBounds.end >= existingBounds.start && $scope.model.currentLayerBounds.end <= existingBounds.end) // end is within another extent
|| ($scope.model.currentLayerBounds.start <= existingBounds.start && $scope.model.currentLayerBounds.start >= existingBounds.end) // new extenmt apans another extent
) {
validBounds = false;
}
});
if(validBounds) {
$scope.model.definedLayerBounds.push($scope.model.currentLayerBounds);
$scope.model.definedLayerBounds.sort(function(a,b) {
if(a.start < b.start) return - 1 ;
if(a.start > b.start) return 1 ;
return 0
})
} else {
console.log("Invalid timeslice bounds" + JSON.stringify ( $scope.model.currentLayerBounds))
}
}
};
$scope.convertIdsToActualNodes = function(idArray) {
var actualNodes = [],
......@@ -215,6 +244,11 @@ angular.module('blizaarModule.controllers')
// return actualNodes;
// };
$scope.doTemporalLayering = function() {
graphLayeringService.createDHTemporalAspect($scope.model.definedLayerBounds)
}
$scope.$on('graphAttributeDataChanged', function(){
$scope.init();
......
......@@ -83,8 +83,11 @@ angular.module('blizaarModule.directives')
});
}
var overlayWidth = window.innerWidth * 0.75;
chartHeight = window.innerHeight * 0.6,
chartWidth = window.innerWidth * 0.6,
chartWidth = overlayWidth * (8/12.0) ; // 6 of 12 boostrap cells onscreen
numericTimestampArray.sort(function(a,b){
......@@ -106,9 +109,11 @@ angular.module('blizaarModule.directives')
// defining a skeleton vega lite specification
// the visualization is built by vega lite based on this
var vlData = {
config: {"background":"white"},
"$schema": "https://vega.github.io/schema/vega-lite/v2.0.json",
//"height": 200,
"width": chartWidth,
autosize:{"type":"fit"},
"data": {
"name": "barData",
"values": barData
......@@ -225,11 +230,15 @@ angular.module('blizaarModule.directives')
//console.log(JSON.stringify(data.intervals[0].extent));
//}
var lowerBound = new Date(data.intervals[0].extent[0]).getTime();
var lowerYear = new Date(data.intervals[0].extent[0]).getFullYear();
var upperBound = new Date(data.intervals[0].extent[1]).getTime();
var upperYear = new Date(data.intervals[0].extent[1]).getFullYear();
var timestamps = getTimestampsWithinBounds(lowerBound, upperBound, numericTimestampArray);
var brushIndex = parseInt(evt.substr(5,1))
attributeLayerBounds[brushIndex] = {start:lowerBound, end:upperBound};
console.log(JSON.stringify((attributeLayerBounds)))
scope.model.currentLayerBounds = {start:lowerYear, end:upperYear};
// console.log(JSON.stringify((scope.model.currentLayerBounds)))
// console.log(JSON.stringify(data))
}
......
......@@ -3024,7 +3024,7 @@ var MultiLayerGraph = function (nodes, links, layerName) {
if(usingReferences) {
return currentInputLayer === existingLayer.name;
}
return currentInputLayer === existingLayer.name;
return currentInputLayer === existingLayer;
})) {
updateLayersArray.push(existingLayer);
}
......@@ -3035,6 +3035,62 @@ var MultiLayerGraph = function (nodes, links, layerName) {
}
/** deleteAspect
*
* Functionality: Removes all layer form existing aspect, and all thoose layer from the master layer , and removes the aspect form the list of aspects
* @param aspectName : The tname of the aspect form whihc the layer should be removed
* * @return none
*
* Created By : Fintan McGee (LIST)
* Date: 06/12/2018
*/
g.deleteAspect = function(aspectName) {
if (!g.aspects.hasOwnProperty(aspectName)) {
console.log("Error:removeLayersFromAspect was called for an unrecognised aspect");
return;
}
if (g.name != "MasterLayer") {
console.log("Error:removeLayersFromAspect was called on layer other than master");
return;
}
var updateLayersArray = [];
var usingReferences = false;
if(g.aspects["Master"].length) {
if (typeof(g.aspects["Master"][0]) === "object") {
usingReferences = true;
}
}
var aspectLayers = [];
g.aspects[aspectName].forEach(function(existingLayer) {
if(usingReferences) {
aspectLayers.push(existingLayer.name);
} else {
aspectLayers.push(existingLayer);
}
});
g.removeLayersFromAspect(aspectName, aspectLayers);
g.removeLayersFromAspect("Master", aspectLayers);
aspectLayers.forEach(function(layerName){
g.deleteLayer(layerName);
})
g.aspects["Master"] = g.layers;
var newAspectsObj = {};
for(var existingAspectName in g.aspects) {
if (existingAspectName !== aspectName) {
newAspectsObj[existingAspectName] = g.aspects[existingAspectName];
}
}
g.aspects = newAspectsObj
// g.aspects[aspectName] = updateLayersArray;
}
/**************************************
* mapLinkEndsToNodeIds
* Functionality: WHen graph json is to be sent the vertices are mapped to edges by reference ,
......
......@@ -510,7 +510,7 @@ angular.module('blizaarModule.services')
}, // end createDHTemporalAspect
/**************************************
* createDHTemporalAspect()
* createDHTemporalFirstMentionAspect()
* Functionality: Assignes a timestamp to each node for first an last mention, in grpah
*
*
......@@ -671,7 +671,7 @@ angular.module('blizaarModule.services')
* Created By : Fintan McGee (LIST)
* Date:17/08/2018
*******************************/
createDHTemporalAspect: function() {
createDHTemporalAspect: function(inputBoundaries) {
var masterLayer = multiLayerGraphService.getGraph();
function binarySearchNumberArray(x,inputArray) {
var startBlock = 0,
......@@ -703,6 +703,18 @@ angular.module('blizaarModule.services')
return -(startBlock + 1);
}
var layerBoundaries = [];
var layerNames = [];
var currentYear;
if(inputBoundaries){
inputBoundaries.forEach(function(boundary) {
layerBoundaries.push(boundary.start) ;
layerBoundaries.push(boundary.end) ;
});
//if input boundaries are defined use them
} else {
// if no input boundaries are defined derive tem usiong common step sizey
var startingYear = 999999999, endingYear = -100000;
// layer by decade
masterLayer.nodes.forEach(function(n) {
......@@ -721,33 +733,39 @@ angular.module('blizaarModule.services')
});
// startingYear = this._values.earliestFirstMentionDate.getFullYear();
startingYear = startingYear - (startingYear % 10);
startingYear = startingYear - (startingYear % 10);
console.log("Corpus date Range: " + startingYear + " - " +endingYear);
var yearDiff = endingYear - startingYear;
console.log("Corpus date Range: " + startingYear + " - " +endingYear);
var yearDiff = endingYear - startingYear;
var stepSizes = [1,2,5,10,25, 50,100,500,1000,5000,10000];
var stepIndex = 0;
var step= stepSizes[stepIndex];
while(yearDiff / step > 5) {
step= stepSizes[stepIndex++];
}
console.log("Inducing layers with step size of " + step );
var stepSizes = [1,2,5,10,25, 50,100,500,1000,5000,10000];
var stepIndex = 0;
var step= stepSizes[stepIndex];
while(yearDiff / step > 5) {
step= stepSizes[stepIndex++];
}
console.log("Inducing layers with step size of " + step );
// defining layers
var LayerRanges = {};
var layerBoundaries = [];
var layerNames = [];
var currentYear;
for( currentYear = startingYear ;currentYear < endingYear; currentYear += step ) {
layerBoundaries.push(currentYear);
layerBoundaries.push(currentYear + step-1);
for (currentYear = startingYear; currentYear < endingYear; currentYear += step) {
layerBoundaries.push(currentYear);
layerBoundaries.push(currentYear + step - 1);
}
if (currentYear <= endingYear) {
layerBoundaries.push(currentYear);
}
layerBoundaries[layerBoundaries.length - 1] = endingYear;
}
if(currentYear <=endingYear ) {
layerBoundaries.push(currentYear);
if(multiLayerGraphService.getGraph().aspects.hasOwnProperty("temporal")) {
multiLayerGraphService.getGraph().deleteAspect("temporal");
}
layerBoundaries[layerBoundaries.length -1] = endingYear;
var localLayers = {};
for(var i = 0 ; i < layerBoundaries.length - 1 ; i=i+2) {
layerNames.push("Years_" +layerBoundaries[i] + "_to_" + layerBoundaries[i+1])
......@@ -764,7 +782,7 @@ angular.module('blizaarModule.services')
if (resourceDate) {
var nodeYear = new Date(resourceDate).getFullYear();
var position = binarySearchNumberArray(nodeYear, layerBoundaries);
var layerName = "";
var layerName = null;
var layerIndex = 0;
if (position > -1) {
layerIndex =Math.floor(position / 2);
......@@ -774,11 +792,14 @@ angular.module('blizaarModule.services')
layerIndex = Math.floor(((position+1) * -1) / 2);
layerName = layerNames[layerIndex];
}
localLayers[layerName].push(n.uid);
var resourceNeighbours = masterLayer.getNeighbours(n);
resourceNeighbours.forEach(function(neighbourNode) {
localLayers[layerName].push(neighbourNode.uid);
}); // end resourceNeighbours.forEach
if(layerName) {
localLayers[layerName].push(n.uid);
var resourceNeighbours = masterLayer.getNeighbours(n);
resourceNeighbours.forEach(function (neighbourNode) {
localLayers[layerName].push(neighbourNode.uid);
}); // end resourceNeighbours.forEach
}
};
}
});
......@@ -790,11 +811,9 @@ angular.module('blizaarModule.services')
// dataService.updateLayerOnServer("addLayerNodesAndLinksByUid", targetlayerName,null,null,nodeUids,edgeUids);
if(multiLayerGraphService.getGraph().aspects.hasOwnProperty("temporal")) {
multiLayerGraphService.getGraph().addLayersToAspect("temporal", layerNames);
} else {
// else {
multiLayerGraphService.getGraph().createAspect("temporal",layerNames);
}
//}
layerNames.forEach(function(temporalLayer){
multiLayerGraphService.getGraph().induceLinksInLayer(temporalLayer);
......
......@@ -3049,6 +3049,7 @@ var MultiLayerGraph = function (nodes, links, layerName) {
}
/**************************************
* mapLinkEndsToNodeIds
* Functionality: WHen graph json is to be sent the vertices are mapped to edges by reference ,
......
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