Merge pull request #889 from quantified-uncertainty/autorun-improvements

Autorun improvements

packages/components/src/components/SquiggleChart.tsx

@@ -14,6 +14,8 @@ import { SquiggleViewer } from "./SquiggleViewer";
 export interface SquiggleChartProps {
   /** The input string for squiggle */
   code?: string;
+  /** Allows to re-run the code if code hasn't changed */
+  executionId?: number;
   /** If the output requires monte carlo sampling, the amount of samples */
   sampleCount?: number;
   /** The amount of points returned to draw the distribution */
@@ -59,6 +61,7 @@ const defaultOnChange = () => {};
 export const SquiggleChart: React.FC<SquiggleChartProps> = React.memo(
   ({
     code = "",
+    executionId = 0,
     environment,
     onChange = defaultOnChange, // defaultOnChange must be constant, don't move its definition here
     height = 200,
@@ -85,6 +88,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = React.memo(
       environment,
       jsImports,
       onChange,
+      executionId,
     });
 
     const distributionPlotSettings = {

packages/components/src/components/SquigglePlayground.tsx

@@ -8,7 +8,7 @@ import React, {
 } from "react";
 import { useForm, UseFormRegister, useWatch } from "react-hook-form";
 import * as yup from "yup";
-import { useMaybeControlledValue } from "../lib/hooks";
+import { useMaybeControlledValue, useRunnerState } from "../lib/hooks";
 import { yupResolver } from "@hookform/resolvers/yup";
 import {
   ChartSquareBarIcon,
@@ -191,51 +191,12 @@ const RunControls: React.FC<{
         icons={[CheckCircleIcon, PauseIcon]}
         status={autorunMode}
         onChange={onAutorunModeChange}
+        spinIcon={autorunMode && isRunning}
       />
     </div>
   );
 };
 
-const useRunnerState = (code: string) => {
-  const [autorunMode, setAutorunMode] = useState(true);
-  const [renderedCode, setRenderedCode] = useState(code); // used in manual run mode only
-  const [isRunning, setIsRunning] = useState(false); // used in manual run mode only
-
-  // This part is tricky and fragile; we need to re-render first to make sure that the icon is spinning,
-  // and only then evaluate the squiggle code (which freezes the UI).
-  // Also note that `useEffect` execution order matters here.
-  // Hopefully it'll all go away after we make squiggle code evaluation async.
-  useEffect(() => {
-    if (renderedCode === code && isRunning) {
-      // It's not possible to put this after `setRenderedCode(code)` below because React would apply
-      // `setIsRunning` and `setRenderedCode` together and spinning icon will disappear immediately.
-      setIsRunning(false);
-    }
-  }, [renderedCode, code, isRunning]);
-
-  useEffect(() => {
-    if (!autorunMode && isRunning) {
-      setRenderedCode(code); // TODO - force run even if code hasn't changed
-    }
-  }, [autorunMode, code, isRunning]);
-
-  const run = () => {
-    // The rest will be handled by useEffects above, but we need to update the spinner first.
-    setIsRunning(true);
-  };
-
-  return {
-    run,
-    renderedCode: autorunMode ? code : renderedCode,
-    isRunning,
-    autorunMode,
-    setAutorunMode: (newValue: boolean) => {
-      if (!newValue) setRenderedCode(code);
-      setAutorunMode(newValue);
-    },
-  };
-};
-
 type PlaygroundContextShape = {
   getLeftPanelElement: () => HTMLDivElement | undefined;
 };
@@ -305,19 +266,32 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
     [vars.sampleCount, vars.xyPointLength]
   );
 
-  const { run, autorunMode, setAutorunMode, isRunning, renderedCode } =
-    useRunnerState(code);
+  const {
+    run,
+    autorunMode,
+    setAutorunMode,
+    isRunning,
+    renderedCode,
+    executionId,
+  } = useRunnerState(code);
 
-  const squiggleChart = (
-    <SquiggleChart
-      code={renderedCode}
-      environment={env}
-      {...vars}
-      bindings={defaultBindings}
-      jsImports={imports}
-      enableLocalSettings={true}
-    />
-  );
+  const squiggleChart =
+    renderedCode === "" ? null : (
+      <div className="relative">
+        {isRunning ? (
+          <div className="absolute inset-0 bg-white opacity-0 animate-semi-appear" />
+        ) : null}
+        <SquiggleChart
+          code={renderedCode}
+          executionId={executionId}
+          environment={env}
+          {...vars}
+          bindings={defaultBindings}
+          jsImports={imports}
+          enableLocalSettings={true}
+        />
+      </div>
+    );
 
   const firstTab = vars.showEditor ? (
     <div className="border border-slate-200">

packages/components/src/components/ui/Toggle.tsx

@@ -1,5 +1,5 @@
+import { RefreshIcon } from "@heroicons/react/solid";
 import clsx from "clsx";
-import { motion } from "framer-motion";
 import React from "react";
 
 type IconType = (props: React.ComponentProps<"svg">) => JSX.Element;
@@ -9,19 +9,19 @@ type Props = {
   onChange: (status: boolean) => void;
   texts: [string, string];
   icons: [IconType, IconType];
+  spinIcon?: boolean;
 };
 
 export const Toggle: React.FC<Props> = ({
-  texts: [onText, offText],
-  icons: [OnIcon, OffIcon],
   status,
   onChange,
+  texts: [onText, offText],
+  icons: [OnIcon, OffIcon],
+  spinIcon,
 }) => {
   const CurrentIcon = status ? OnIcon : OffIcon;
   return (
-    <motion.button
-      layout
-      transition={{ duration: 0.2 }}
+    <button
       className={clsx(
         "rounded-md py-0.5 bg-slate-500 text-white text-xs font-semibold flex items-center space-x-1",
         status ? "bg-slate-500" : "bg-gray-400",
@@ -30,12 +30,18 @@ export const Toggle: React.FC<Props> = ({
       )}
       onClick={() => onChange(!status)}
     >
-      <motion.div layout transition={{ duration: 0.2 }}>
-        <CurrentIcon className="w-6 h-6" />
-      </motion.div>
-      <motion.span layout transition={{ duration: 0.2 }}>
-        {status ? onText : offText}
-      </motion.span>
-    </motion.button>
+      <div className="relative w-6 h-6" key={String(spinIcon)}>
+        <CurrentIcon
+          className={clsx(
+            "w-6 h-6 absolute opacity-100",
+            spinIcon && "animate-hide"
+          )}
+        />
+        {spinIcon && (
+          <RefreshIcon className="w-6 h-6 absolute opacity-0 animate-appear-and-spin" />
+        )}
+      </div>
+      <span>{status ? onText : offText}</span>
+    </button>
   );
 };

packages/components/src/lib/hooks/index.ts

@@ -0,0 +1,3 @@
+export { useMaybeControlledValue } from "./useMaybeControlledValue";
+export { useSquiggle, useSquigglePartial } from "./useSquiggle";
+export { useRunnerState } from "./useRunnerState";

packages/components/src/lib/hooks/useMaybeControlledValue.ts

@@ -0,0 +1,22 @@
+import { useState } from "react";
+
+type ControlledValueArgs<T> = {
+  value?: T;
+  defaultValue: T;
+  onChange?: (x: T) => void;
+};
+
+export function useMaybeControlledValue<T>(
+  args: ControlledValueArgs<T>
+): [T, (x: T) => void] {
+  let [uncontrolledValue, setUncontrolledValue] = useState(args.defaultValue);
+  let value = args.value ?? uncontrolledValue;
+  let onChange = (newValue: T) => {
+    if (args.value === undefined) {
+      // uncontrolled mode
+      setUncontrolledValue(newValue);
+    }
+    args.onChange?.(newValue);
+  };
+  return [value, onChange];
+}

packages/components/src/lib/hooks/useRunnerState.ts

@@ -0,0 +1,100 @@
+import { useLayoutEffect, useReducer } from "react";
+
+type State = {
+  autorunMode: boolean;
+  renderedCode: string;
+  // "prepared" is for rendering a spinner; "run" for executing squiggle code; then it gets back to "none" on the next render
+  runningState: "none" | "prepared" | "run";
+  executionId: number;
+};
+
+const buildInitialState = (code: string): State => ({
+  autorunMode: true,
+  renderedCode: "",
+  runningState: "none",
+  executionId: 1,
+});
+
+type Action =
+  | {
+      type: "SET_AUTORUN_MODE";
+      value: boolean;
+      code: string;
+    }
+  | {
+      type: "PREPARE_RUN";
+    }
+  | {
+      type: "RUN";
+      code: string;
+    }
+  | {
+      type: "STOP_RUN";
+    };
+
+const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "SET_AUTORUN_MODE":
+      return {
+        ...state,
+        autorunMode: action.value,
+      };
+    case "PREPARE_RUN":
+      return {
+        ...state,
+        runningState: "prepared",
+      };
+    case "RUN":
+      return {
+        ...state,
+        runningState: "run",
+        renderedCode: action.code,
+        executionId: state.executionId + 1,
+      };
+    case "STOP_RUN":
+      return {
+        ...state,
+        runningState: "none",
+      };
+  }
+};
+
+export const useRunnerState = (code: string) => {
+  const [state, dispatch] = useReducer(reducer, buildInitialState(code));
+
+  useLayoutEffect(() => {
+    if (state.runningState === "prepared") {
+      // this is necessary for async playground loading - otherwise it executes the code synchronously on the initial load
+      // (it's surprising that this is necessary, but empirically it _is_ necessary, both with `useEffect` and `useLayoutEffect`)
+      setTimeout(() => {
+        dispatch({ type: "RUN", code });
+      }, 0);
+    } else if (state.runningState === "run") {
+      dispatch({ type: "STOP_RUN" });
+    }
+  }, [state.runningState, code]);
+
+  const run = () => {
+    // The rest will be handled by dispatches above on following renders, but we need to update the spinner first.
+    dispatch({ type: "PREPARE_RUN" });
+  };
+
+  if (
+    state.autorunMode &&
+    state.renderedCode !== code &&
+    state.runningState === "none"
+  ) {
+    run();
+  }
+
+  return {
+    run,
+    autorunMode: state.autorunMode,
+    renderedCode: state.renderedCode,
+    isRunning: state.runningState !== "none",
+    executionId: state.executionId,
+    setAutorunMode: (newValue: boolean) => {
+      dispatch({ type: "SET_AUTORUN_MODE", value: newValue, code });
+    },
+  };
+};

packages/components/src/lib/hooks/useSquiggle.ts

@@ -5,10 +5,11 @@ import {
   run,
   runPartial,
 } from "@quri/squiggle-lang";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo } from "react";
 
 type SquiggleArgs<T extends ReturnType<typeof run | typeof runPartial>> = {
   code: string;
+  executionId?: number;
   bindings?: bindings;
   jsImports?: jsImports;
   environment?: environment;
@@ -21,7 +22,15 @@ const useSquiggleAny = <T extends ReturnType<typeof run | typeof runPartial>>(
 ) => {
   const result: T = useMemo<T>(
     () => f(args.code, args.bindings, args.environment, args.jsImports),
-    [f, args.code, args.bindings, args.environment, args.jsImports]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      f,
+      args.code,
+      args.bindings,
+      args.environment,
+      args.jsImports,
+      args.executionId,
+    ]
   );
 
   const { onChange } = args;
@@ -42,23 +51,3 @@ export const useSquigglePartial = (
 export const useSquiggle = (args: SquiggleArgs<ReturnType<typeof run>>) => {
   return useSquiggleAny(args, run);
 };
-
-type ControlledValueArgs<T> = {
-  value?: T;
-  defaultValue: T;
-  onChange?: (x: T) => void;
-};
-export function useMaybeControlledValue<T>(
-  args: ControlledValueArgs<T>
-): [T, (x: T) => void] {
-  let [uncontrolledValue, setUncontrolledValue] = useState(args.defaultValue);
-  let value = args.value ?? uncontrolledValue;
-  let onChange = (newValue: T) => {
-    if (args.value === undefined) {
-      // uncontrolled mode
-      setUncontrolledValue(newValue);
-    }
-    args.onChange?.(newValue);
-  };
-  return [value, onChange];
-}

packages/components/tailwind.config.js

@@ -5,6 +5,27 @@ module.exports = {
   },
   important: ".squiggle",
   theme: {
-    extend: {},
+    extend: {
+      animation: {
+        "appear-and-spin":
+          "spin 1s linear infinite, squiggle-appear 0.2s forwards",
+        "semi-appear": "squiggle-semi-appear 0.2s forwards",
+        hide: "squiggle-hide 0.2s forwards",
+      },
+      keyframes: {
+        "squiggle-appear": {
+          from: { opacity: 0 },
+          to: { opacity: 1 },
+        },
+        "squiggle-semi-appear": {
+          from: { opacity: 0 },
+          to: { opacity: 0.5 },
+        },
+        "squiggle-hide": {
+          from: { opacity: 1 },
+          to: { opacity: 0 },
+        },
+      },
+    },
   },
 };