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.
acjim · Sep 8, 2016 · dfd9689 · dfd9689
1 parent f9f04c9
commit dfd9689
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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: