tested and fixed some bugs

inst/htmlwidgets/js/app.js

@@ -145,24 +145,32 @@ function App(id, { specUrls, specs, autoPlay = false, frameDur, frameDel }) {
    */
   function play(startIndex) {
     frameIndex = startIndex || 0;
+
     const tick = () => {
-      animateFrame(frameIndex);
-      frameIndex++;
+      animateFrame(frameIndex).then(() => {
+        frameIndex++; // next frame
+
+        if (frames[frameIndex]) {
+          tick();
+        }
+      });
+
       if (typeof HTMLWidgets !== "undefined" && HTMLWidgets.shinyMode) {
         var prevIndex = frameIndex - 1;
         Shiny.onInputChange("slider_state", prevIndex);
       }
     };
+
     tick();
 
-    if (intervalId) clearInterval(intervalId);
-    intervalId = setInterval(() => {
-      tick();
-      if (frameIndex >= frames.length) {
-        clearInterval(intervalId);
-        frameIndex = 0;
-      }
-    }, frameDuration + frameDelay + 500);
+    // if (intervalId) clearInterval(intervalId);
+    // intervalId = setInterval(() => {
+    //   tick();
+    //   if (frameIndex >= frames.length) {
+    //     clearInterval(intervalId);
+    //     frameIndex = 0;
+    //   }
+    // }, frameDuration + frameDelay + 500);
   }
 
   /**
@@ -339,10 +347,10 @@ function App(id, { specUrls, specs, autoPlay = false, frameDur, frameDel }) {
    * @param {Number} index specification index in vegaLiteSpecs
    * @returns a promise of gemini.animate
    */
-  let animating = false;
   async function animateFrame(index) {
     if (!frames[index]) return;
-    if (animating) return;
+
+    console.log("animating frame", index);
 
     const { axisSelector, visSelector, otherLayers, descr, slider, controls } =
       getSelectors(id);
@@ -369,13 +377,13 @@ function App(id, { specUrls, specs, autoPlay = false, frameDur, frameDel }) {
       clearTimeout(timeoutId);
     }
 
+    return new Promise((res) => {
       drawSpec(index, source).then(() => {
         timeoutId = setTimeout(() => {
           d3.select(descr).html(currMeta.description);
-        animating = true;
           anim.play(visSelector).then(() => {
-          animating = false;
             d3.select(slider).property("value", index + 1);
+            res();
           });
 
           const transformX = currMeta.transformX || 0;
@@ -430,6 +438,7 @@ function App(id, { specUrls, specs, autoPlay = false, frameDur, frameDel }) {
           }
         }, frameDelay);
       });
+    });
   }
 
   /**
@@ -653,11 +662,10 @@ function App(id, { specUrls, specs, autoPlay = false, frameDur, frameDel }) {
         let resp = null;
 
         if (curr.custom) {
-          console.log(curr.sequence)
           resp = await gemini.recommendForSeq(curr.sequence, {
             ...options,
             stageN: curr.sequence.length - 1,
-            totalDuration: frameDuration,
+            totalDuration: frameDuration * 2,
           });
 
           const _gemSpec = resp[0].specs.map((d) => d.spec);

inst/htmlwidgets/js/custom-animations.js

@@ -785,7 +785,7 @@ const CustomAnimations = {
         },
       },
     };
-    console.log(calculatedSource)
+
     return [rawSource, intermediate, step_1, step_2, step_3, step_4, target];
   },
   median: (rawSource, target, calculatedSource, p) => {

inst/htmlwidgets/js/hack-facet-view.js

@@ -218,11 +218,13 @@ function getHackedSpec({ view, spec, width = 600, height = 600 }) {
     const xField = spec.meta.parse === "jitter" ? "x" : CONF.X_FIELD;
     const yField = spec.meta.parse === "jitter" ? "y" : CONF.Y_FIELD;
 
+    const xCoord = xStart + scaleX(d[xField]);
+
     values.push({
       ...d,
-      [CONF.X_FIELD]: xStart + scaleX(d[xField]),
+      [CONF.X_FIELD]: xCoord,
       [CONF.Y_FIELD]: yStart + scaleY(d[yField]),
-      [CONF.X_FIELD + "_num"]: xStart + scaleX(d.scaledX),
+      [CONF.X_FIELD + "_num"]: d.scaledX ? xStart + scaleX(d.scaledX) : xCoord,
       scaleX: (val) => yStart + scaleX(val),
       scaleY: (val) => yStart + scaleY(val),
     });

inst/htmlwidgets/test/index.html

@@ -176,14 +176,14 @@
     <script src="../js/custom-animations.js"></script>
     <script src="../js/app.js"></script>
     <script>
-      const animationType = "min";
+      const animationType = "median";
       const base = "../../../sandbox/custom_animations/";
       let app1 = null;
 
       d3.json(
-        `${base}/custom-animations-${animationType}-R.json`
+        `${base}/custom-animations-${animationType}-faceted-R.json`
       ).then(specs => {
-        app1 = App("app", { specs, frameDur: 4000 });
+        app1 = App("app", { specs, frameDur: 3000 });
       });
     </script>
   </body>