From dfd968980270de385a9ac5fa6ab830adaa699d49 Mon Sep 17 00:00:00 2001 From: Roan Date: Thu, 8 Sep 2016 10:57:08 +0200 Subject: [PATCH] api updated from intermediate points, Filehandling updated to process (include) intermediate points Map Directive updated to add transition (animation) @todo: find proper alogrithm to select intermediate layouts instead of 40 random layouts. --- .../filehandling/fileHandlingService.js | 48 ++++++++++++++----- src/app/components/map/mapDirective.js | 36 +++++++++++++- src/app/shared/api.js | 3 +- 3 files changed, 73 insertions(+), 14 deletions(-) diff --git a/src/app/components/filehandling/fileHandlingService.js b/src/app/components/filehandling/fileHandlingService.js index 76fb846..232782e 100644 --- a/src/app/components/filehandling/fileHandlingService.js +++ b/src/app/components/filehandling/fileHandlingService.js @@ -390,24 +390,48 @@ return api.relax_existing(relax_additional_params, acd1File) .then(function (filename) { acd1File = filename.updated_acd1; - var map_additional_params = {projection: (projection == 0) ? projection : projection_comment}; - return api.execute(api.get_commands().GET_MAP, map_additional_params, acd1File) - .then(function (filename) { - return $q.all([ - readFile(filename) - ]).then(function (data) { - mapData = parseLayoutData(JSON.parse(data)); - fileHandler.setMapIsChanged(true); - return mapData; - }); - }, function (reason) { - return errorReason(reason); + var output_json = filename.output_json; + return $q.all([ + readFile(output_json) + ]).then(function (data) { + var unprocessed_data = JSON.parse(data); + var progressive_data = []; + var intermediate_size = unprocessed_data.intermediate_layouts.length; + var frequency = parseInt(intermediate_size/40); // selected intermediate states so that total number of steps be 40 (40 has been selected randomly) + //@TODO, write an algorithm which finds most distinguished changes to show as animation/intermediate states + var count = 0; + unprocessed_data.intermediate_layouts.forEach(function (layout, index) { + if(index ==0 || (index%frequency) == 0 || isNaN(index%frequency) || index == intermediate_size) { + progressive_data[count] = parseLayoutData(formatDataForIntermediateLayout(unprocessed_data, index)); + count ++; + } }); + var map = unprocessed_data.map; + var map_data = {map:map[0], stress: map[0].stress}; + mapData = parseLayoutData((map_data)); + progressive_data[progressive_data.length] = mapData; + fileHandler.setMapIsChanged(true); + return progressive_data; + }); }, function (reason) { return errorReason(reason); }); } + function formatDataForIntermediateLayout(data, index) + { + var map = data.map[0]; + var map_data = {map: {}}; + map_data.stress = data.intermediate_stresses[0][index]; + map_data.map.layout = data.intermediate_layouts[index]; + for (var property in map) { + if (map.hasOwnProperty(property) && property != 'layout') { + map_data.map[property] = map[property]; + } + } + return map_data; + } + /** * Creates the data structure of the map data object and returns it. diff --git a/src/app/components/map/mapDirective.js b/src/app/components/map/mapDirective.js index 8e139a1..3d5274d 100644 --- a/src/app/components/map/mapDirective.js +++ b/src/app/components/map/mapDirective.js @@ -174,9 +174,27 @@ app.directive('d3Map', ['$rootScope', '$window', '$timeout', 'toolbar', 'toolbar //Update nodeGroup + .transition() // Transition from old to new + .duration(1500) + .delay(function(d, i) { + return 5; // Dynamic delay (i.e. each item delays a little longer) + }) .attr("transform", function (d) { return "translate(" + xScale(d.x) + "," + yScale(d.y) + ")"; }) + .attr("cx", function(d) { + return xScale(d[0]); // Circle's X + }) + .attr("cy", function(d) { + return yScale(d[1]); // Circle's Y + }) + .each("end", function() { // End animation + d3.select(this) // 'this' means the current element + .transition() + .duration(1000); + + }) + .attr("fill", function (d) { if (d.fixed || d.disconnected) { return "#bebebe"; @@ -1179,7 +1197,23 @@ app.directive('d3Map', ['$rootScope', '$window', '$timeout', 'toolbar', 'toolbar */ scope.$watch('data', function (newVals) { if (!_.isUndefined(newVals)) { - renderWithData(newVals); + if(_.isArray(newVals)) { + var size = newVals.length; + var count = 0; + _.each(newVals, function(newVal) { + $timeout(function () { + renderWithData(newVal); + count++; + if(size == count) { + scope.data = newVal; + scope.data.stress = newVal.stress; + } + }, 2000); + }) + } + else { + renderWithData(newVals); + } } }, true); } diff --git a/src/app/shared/api.js b/src/app/shared/api.js index bc61538..0f7cfd2 100644 --- a/src/app/shared/api.js +++ b/src/app/shared/api.js @@ -193,7 +193,7 @@ angular.module('acjim.api', []) input_parameter.data.format = additional_params.format; break; case COMMANDS.RELAX_EXISTING: - var input_parameter = {command: COMMANDS.RELAX_EXISTING, data: {projection: 0}}; + var input_parameter = {command: COMMANDS.RELAX_EXISTING, data: {projection: 0, record_intermediate_layouts: true}}; if (!additional_params.hasOwnProperty('projection')) { throw new Error('Missing mandatory parameter, projection'); @@ -550,6 +550,7 @@ angular.module('acjim.api', []) * * @param additional_params = { * projection: int, //mandatory + * record_intermediate_layouts: bool (default: Fals) * rough_optimization: bool (default: False) * }; * Result object: