Beginning to build a tour feature #79

network-app/core/app.js

@@ -32,6 +32,7 @@
             { function: transformToWindow, settings: settings },
             { function: saveToStorage },
             { function: setupJLouvain },
+            { function: tour },
         ]); // transformToWindow, saveToStorage, and setupJLouvain is called as a callback
 
     });

network-app/core/load.js

@@ -334,6 +334,9 @@ const setupInteractivity = (settings = undefined) => {
     nodeElements.on("click", (event, node) => {
         // console.log('event', event);
         // console.log('node', node);
+        if (window.tour)
+            return false;
+
         event.stopPropagation();
         if (event.metaKey === true) {
             if (nodeIsSelected(node)) {
@@ -352,16 +355,21 @@ const setupInteractivity = (settings = undefined) => {
     });
 
     textElements.on("click", (event, node) => {
-        console.log(node);
+        if (window.tour)
+            return false;
         toggleNode(node);
         return true;
     });
 
     edgeElements.on("mouseover", (event, edge) => {
+        if (window.tour)
+            return false;
         if (!window.nodeSelected && !window.edgeSelected) quickEdgeInfo(edge);
     });
 
     edgeElements.on("click", (event, edge) => {
+        if (window.tour)
+            return false;
         event.stopPropagation();
         quickEdgeInfo(edge);
         if (window.toggledCommentedElements) {

network-app/core/tour.js

@@ -19,11 +19,51 @@ const tour1 = [
     },
 ];
 
-const tour = () => {
-    // don't forget to run resetLocalStorage() before this function!
-    tour1.forEach((step) => {
-        step.settings.forEach((settings) => changeSetting(settings));
-        console.log(step.text);
+function until(conditionFunction) {
+    const poll = (resolve) => {
+        if (conditionFunction()) resolve();
+        else setTimeout((_) => poll(resolve), 400);
+    };
+
+    return new Promise(poll);
+}
+
+async function tour(steps = []) {
+    window.tour = true;
+
+    // hide settings
+    hide("#settings");
+
+    changeSetting("#minDegree", 0, true, 'slider');
+    changeSetting("#minWeight", 0, true, 'slider');
+    changeSetting("#startYear", 1930, true, 'dropdown');
+    changeSetting("#endYear", 1940, true, 'dropdown');
+
+    await until((_) => window.simulationDone == true);
+
+    steps = [
+        {
+            node_id: "jackie_maye",
+            zoom: 1,
+            wait: 4000,
+            html: "Jackie Maye",
+            textX: 200,
+            textY: 200,
+        },
+    ];
+
+    goTo(0,0);
+
+    steps.forEach((step) => {
+        let nodeObject = findNode(step.node_id);
+        if (nodeObject) {
+            d3.select('#quickEdgeInfo').style('top', `${step.textY}px`)
+            d3.select('#quickEdgeInfo').style('left', `${step.textX}px`)
+            d3.select('#quickEdgeInfo').html(step.html)
+            zoomToNode(step.node_id, step.zoom);
+        } else {
+            console.error(`Could not find node with id ${step.node_id}`)
+        }
     });
-    return true;
-};
+
+}

network-app/core/utils/general.js

@@ -563,6 +563,7 @@ const modifySimulation = (settings) => {
     graph.simulation.force("link").strength(settings.force.linkStrength);
 
     graph.simulation.on("tick", function () {
+        window.simulationDone = false;
         nodeElements.attr("cx", (n) => n.x);
         nodeElements.attr("cy", (n) => n.y);
 
@@ -575,6 +576,10 @@ const modifySimulation = (settings) => {
         textElements.attr("y", (n) => n.y + 4);
     });
 
+    graph.simulation.on("end", function () {
+        window.simulationDone = true;
+    })
+
     // restart the simulation now that everything is set
     graph.simulation.restart();
 

network-app/core/zoom.js

@@ -59,7 +59,7 @@ if (_)
         d3.zoomIdentity.translate(_.x, _.y).scale(_.k)
     );
 
-function zoomToNode(node = undefined, z=4) {
+function zoomToNode(node = undefined, z=4, blink=3) {
     if (node === undefined)
         node = graph.nodes[Math.floor(Math.random() * graph.nodes.length - 1)];
 
@@ -70,9 +70,9 @@ function zoomToNode(node = undefined, z=4) {
     graph.svg
         .transition()
         .duration(1000)
-        .call(zoom.transform, d3.zoomIdentity.scale(4).translate(-node.x, -node.y));
+        .call(zoom.transform, d3.zoomIdentity.scale(z).translate(-node.x, -node.y));
 
-    highlightNode(node.node_id, 3);
+    highlightNode(node.node_id, blink);
 
     return node;
 }