merge-proj-viz-into-master: fin du projet

AjaxManager.php

@@ -146,7 +146,7 @@ class AjaxManager
         }
 
         // Edges from Artifact nodes to User nodes
-        $stmt = $this->db->prepare("SELECT DISTINCT answer.artifact, answer.user, artifactclass.description, artifact.state FROM answered JOIN answer ON answered.modified = answer.modified JOIN artifact ON answer.artifact = artifact.id JOIN artifactclass ON artifact.classid = artifactclass.id;");
+        $stmt = $this->db->prepare("SELECT DISTINCT Answer.artifact, Answer.user, ArtifactClass.description, Artifact.state FROM Answered JOIN Answer ON Answered.modified = Answer.modified JOIN Artifact ON Answer.artifact = Artifact.id JOIN ArtifactClass ON Artifact.classid = ArtifactClass.id;");
         $stmt->execute();
         $result = $stmt->setFetchMode(PDO::FETCH_ASSOC);
 

credit.html

@@ -40,9 +40,9 @@
   <li><a href="https://www.linkedin.com/in/adrien-wacquet-321729185?lipi=urn%3Ali%3Apage%3Ad_flagship3_profile_view_base_contact_details%3B3MisevnYRhyUXreTwAzlzA%3D%3D"> Adrien Wacquet (Irisa, ISTIC, Rennes 1): task user interface, chat, feedbacks, forum, Ajax</a></li>
 </ul>
 
-  <h2>Dev Movie (from start to 05-2021)</h2>
+  <h2>Dev Movie (from start to 06-2021)</h2>
 <center>
-<iframe width="560" height="315" src="https://www.youtube.com/embed/O-SCYRvR1R0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<iframe width="560" height="315" src="https://www.youtube.com/embed/iWMyBqHh9do" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </center>
 
 <h2>Powered by</h2>

tasks-viewer.php

@@ -19,9 +19,10 @@
         z-index: 999;
         background: #000;
     }
-    .__________cytoscape_container{
 
-        margin : 8% 0% 10% 1.5%;
+    .__________cytoscape_container {
+
+        margin: 8% 0% 10% 1.5%;
     }
 </style>
 
@@ -31,8 +32,9 @@
         /**
          * get_cyto_nodes
          * 
-         * Returns cytoscape nodes objects.
+         * Retrieves cytoscape nodes objects using AJAX POST request.
          * 
+         * @see AjaxManager::getNodesData()
          * @returns cytoscape nodes objects
          */
         function get_cyto_nodes() {
@@ -65,8 +67,9 @@
         /**
          * get_cyto_edges
          * 
-         * Returns cytoscape edges objects.
+         * Retrieves cytoscape edges objects using AJAX POST request.
          * 
+         * @see AjaxManager::getEdgesData()
          * @returns cytoscape edges objects
          */
         function get_cyto_edges() {
@@ -220,35 +223,6 @@
             }
         }
 
-        /**
-         * Set nodes animations.
-         * 
-         * @param nodes array of nodes
-         */
-        function set_node_animation(nodes) {
-            nodes.forEach(n => {
-                n.animate({
-                    style: {
-                        opacity: 0
-                    },
-                    duration: 600,
-                    easing: 'ease-in-sine'
-                }).delay(200).animate({
-                    style: {
-                        opacity: 0.33
-                    },
-                    duration: 600,
-                    easing: 'ease-in-sine'
-                }).delay(0).animate({
-                    style: {
-                        opacity: 1
-                    },
-                    duration: 600,
-                    easing: 'ease-in-sine'
-                });
-            });
-        }
-
         /**
          * add_nodes_to_graph
          * 
@@ -268,8 +242,8 @@
                             type: n.data.type
                         },
                         position: {
-                            x: 200,
-                            y: 200
+                            x: 0,
+                            y: 0
                         }
                     });
                 } catch (error) {
@@ -305,6 +279,68 @@
             });
         }
 
+        /**
+         * center_nodes
+         * 
+         * Center recently added nodes.
+         * 
+         * @param nodes array of nodes
+         */
+        function center_nodes(nodes) {
+            try {
+                // Retrieving new nodes, ie nodes recently added to position : x = 0, y = 0
+                var newNodes = nodes.filter(n => n.position('x') === 0 && n.position('y') === 0);
+                newNodes.forEach(n => {
+                    var connectedEdge;
+                    (n.data('type') == 'user') ? connectedEdge = cy.edges().filter(e => e.data('target') === n.data('id')):
+                        connectedEdge = cy.edges().filter(e => e.data('source') === n.data('id'));
+                    if (connectedEdge.length > 0) {
+                        var closetNode;
+                        (n.data('type') == 'user') ? closestNode = cy.getElementById(connectedEdge[0].data('source')):
+                            closestNode = cy.getElementById(connectedEdge[0].data('target'));
+                        // Move node 'n' closer to 'closestNode'
+                        cy.clearQueue(); // Clear animations queue
+                        n.animation({
+                            position: {
+                                x: closestNode.position('x') - 50,
+                                y: closestNode.position('y') - 50
+                            },
+                            duration: 800,
+                            easing: 'cubic-bezier(.91,.1,.97,.39)'
+                        }).play();
+                    }
+                });
+            } catch (error) {
+                console.debug("Error while centering nodes:" + error);
+            }
+        }
+
+        /**
+         * nodes_floating_animation
+         * 
+         * Nodes floating animation using promise and reverse() Cytoscape function.
+         * @see https://js.cytoscape.org/#ani.reverse
+         */
+        function nodes_floating_animation() {
+            cy.nodes().filter(n => n.data('type') === 'user').forEach(n => {
+                if (n.data('type') == 'user') {
+                    var left = n.animation({
+                        position: {
+                            x: n.position('x') - 20
+                        },
+                        duration: 1500,
+                        queue: true,
+                        easing: 'cubic-bezier(.48,.55,.9,.9)'
+                    });
+
+                    left.play().promise('completed').then(function() {
+                        // Start again : back to the right
+                        left.reverse().rewind().play();
+                    });
+                }
+            });
+        }
+
         /**
          * play_sound
          * 
@@ -359,6 +395,8 @@
                     });
                     console.debug(edgesToAdd.length + " edge(s) will be added.")
                     add_edges_to_graph(cy, edgesToAdd);
+                    // Center nodes
+                    center_nodes(cy.nodes());
                 }
             }).catch(function(err) {
                 console.error("refreshGraph edges error: " + err);
@@ -397,7 +435,7 @@
                     name: 'cola',
                     refresh: 2,
                     edgeLength: 100,
-                    nodeSpacing: 20,
+                    nodeSpacing: 80,
                     fit: true
                 },
 
@@ -435,11 +473,11 @@
                             'content': 'data(label)',
                             'min-zoomed-font-size': '12',
                             'font-size': '8',
+                            'text-margin-y': '8px',
                             'color': '#fff',
                             'line-color': '#E6E6FA',
                             'width': '2',
                             'opacity': '0.5',
-                            // Bezier edges
                             'curve-style': 'bezier',
                             'control-point-step-size': '50'
                         }
@@ -455,13 +493,13 @@
             // Colors & animations
             set_node_color(cy.nodes());
             set_edge_color(cy.edges());
-            set_node_animation(cy.nodes());
 
-            // Refresh graph every 10 seconds
-            const interval = setInterval(function() {
+            // Refresh graph every 5 seconds
+            const refresh_interval = setInterval(function() {
                 refresh_graph();
-            }, 10000);
-            //clearInterval(interval); // Comment this line to enable auto refresh
+                nodes_floating_animation(); // Trigger floating user nodes animation
+            }, 5000);
+            //clearInterval(refresh_interval); // Comment this line to enable auto refresh
         }
     });
 </script>

testblockly.js

+//For the first use of this test page, you must first have Node.js (https://nodejs.org/en/).
+//Once installed, you must type this command :
+//npm install --global mocha 
+//Then you just have to launch the tests with the command :
+//mocha testblockly.js 
+//at the root of the headwork project.
+
 const { Workspace, Block, Toolbox, ToolboxCategory } = require('blockly');
 var Blockly = require('blockly');
 var num = 0;

workflowdesign.php

@@ -8,7 +8,7 @@ function workflowdesign($conn){
 <div class="container">
     <div class="row">
         <div class="col bg-secondary text-white">
-            <div id="hw-artefact-info">Send a question of your workflow
+            <div id="hw-artefact-info">Enter your workflow
             </div>
         </div>
     </div>
@@ -18,9 +18,9 @@ function workflowdesign($conn){
 
 <!--Création de l'html nécessaire à l'injection de blockly-->
  
-<div id="blocklyArea" style="height: 480px; width: 600px;"></div>
+<div id="blocklyArea" style="height: 700px; width: 1150px;"></div>
 <div id="blocklyDiv" style="position: absolute"></div>
-<textarea id="textarea" style="height: 480px; width: 600px;"></textarea>
+<textarea id="textarea" style="height: 700px; width: 1150px;"></textarea>
 
 <!--Récupération des scripts de node_modules utiles pour blockly-->
 <script type ="module", src="node_modules">import Blockly from 'blockly';</script>
@@ -79,7 +79,7 @@ function workflowdesign($conn){
         var res = statements_com.replaceAll("\"","'")
       }
       // TODO: Assemble JavaScript into code variable.
-      var json = " Do Awaiting " + number_reponse + " answers " + res 
+      var json = " Do " + res + "  Awaiting " + number_reponse + " answers "
       var code = JSON.stringify(json, null, '\t');
       return code;
     };
@@ -173,7 +173,7 @@ Blockly.JavaScript['task_has_reached'] = function(block) {
   if(statements_name != null) {
     var res = statements_name.replaceAll("\"","'")
   }
-  var json = " Do Task has reached absolute majority out of " + number_name + " " + res
+  var json = " Do" + res +" Task has reached absolute majority out of " + number_name
   var code = JSON.stringify(json, null, '\t');
   return code;
 };
@@ -201,7 +201,7 @@ Blockly.JavaScript['task_has_consensus'] = function(block) {
   if(statements_name != null) {
     var res = statements_name.replaceAll("\"","'")
   }
-  var json = "Do Task has reached consensus out of " + number_name + " " + res
+  var json = "Do" + res + " Task has reached consensus out of " + number_name
   var code = JSON.stringify(json, null, '\t');
   return code;
 };
@@ -273,7 +273,12 @@ workspace.addChangeListener(myUpdateFunction);
 <script> 
 function getValue() {
     var input = document.getElementById("textarea").value;
-    alert(input);
+    var tb_str = input.split('\'');
+    if(tb_str[2] != null) {
+      var res = tb_str[2].replaceAll("\"","")
+    }
+    var json = {"1":{"2":{ "guard": "none", "actions": [ tb_str[1] ]} }, "2": { "3":  { "guard": res , "actions": "" } }, "3": {} } ;
+    alert(JSON.stringify(json, null, '   '));
 }
 </script>
 </br>