WIP: interface for pausing re-execution of simulations

Author: quffaro

packages/frontend/src/components/execute_control.tsx

@@ -0,0 +1,34 @@
+import type { Signal } from "solid-js";
+
+import { Button } from "catcolab-ui-components";
+
+export function ExecuteGuard(props: {
+    text: string;
+    triggerText?: string;
+    canTrigger: Signal<boolean>;
+    shouldTrigger: Signal<boolean>;
+}) {
+    const [canTrigger, setCanTrigger] = props.canTrigger;
+    const [_shouldTrigger, setShouldTrigger] = props.shouldTrigger;
+
+    return (
+        <div style="display: flex; align-items: center; justify-content: flex-end; gap: 4px;">
+            <Button
+                type="button"
+                variant="utility"
+                onClick={() => setShouldTrigger((val) => !val)}
+                disabled={canTrigger()}
+            >
+                {props.text}
+            </Button>
+            <Button
+                type="button"
+                variant="utility"
+                onClick={() => setCanTrigger((val) => !val)}
+                disabled={false}
+            >
+                {`Turn ${canTrigger() ? "off" : "on"} ${props.triggerText ?? ""}`}
+            </Button>
+        </div>
+    );
+}

packages/frontend/src/components/index.ts

@@ -1,5 +1,6 @@
 export * from "./delete_document_dialog";
 export * from "./document_picker";
+export * from "./execute_control";
 export * from "./id_input";
 export * from "./json_import";
 export * from "./rich_text_editor";

packages/frontend/src/stdlib/analyses/mass_action.tsx

@@ -1,4 +1,4 @@
-import { createMemo } from "solid-js";
+import { createMemo, createSignal, on } from "solid-js";
 
 import {
     BlockTitle,
@@ -11,6 +11,7 @@ import {
 } from "catcolab-ui-components";
 import type { MassActionProblemData, MorType, ObType, QualifiedName } from "catlog-wasm";
 import type { ModelAnalysisProps } from "../../analysis";
+import { ExecuteGuard } from "../../components";
 import { morLabelOrDefault } from "../../model";
 import { ODEResultPlot } from "../../visualization";
 import { createModelODEPlotWithEquations } from "./model_ode_plot";
@@ -101,12 +102,28 @@ export default function MassAction(
         (model) => props.simulate(model, props.content),
     );
 
-    const plotResult = () => result()?.plotData;
+    const [autoUpdate, setAutoUpdate] = createSignal(true);
+    const [shouldUpdate, trigger] = createSignal(false);
+    const plotResult = createMemo(
+        on(
+            () => (autoUpdate() ? result()?.plotData : shouldUpdate()),
+            () => result()?.plotData,
+        ),
+    );
     const latexEquations = () => result()?.latexEquations ?? [];
 
+    const execute = () => (
+        <ExecuteGuard
+            text="Execute"
+            triggerText="auto-simulate"
+            canTrigger={[autoUpdate, setAutoUpdate]}
+            shouldTrigger={[shouldUpdate, trigger]}
+        />
+    );
+
     return (
         <div class="simulation">
-            <BlockTitle title={props.title} />
+            <BlockTitle title={props.title} settingsPane={execute()} />
             <Foldable title="Parameters" defaultExpanded>
                 <div class="parameters">
                     <FixedTableEditor rows={obGenerators()} schema={obSchema} />

packages/frontend/src/stdlib/analyses/stochastic_mass_action.tsx

@@ -1,4 +1,4 @@
-import { createMemo } from "solid-js";
+import { createMemo, createSignal, on } from "solid-js";
 
 import {
     BlockTitle,
@@ -9,6 +9,7 @@ import {
 } from "catcolab-ui-components";
 import type { DblModel, MassActionProblemData, MorType, ObType, QualifiedName } from "catlog-wasm";
 import type { ModelAnalysisProps } from "../../analysis";
+import { ExecuteGuard } from "../../components";
 import { morLabelOrDefault } from "../../model";
 import { ODEResultPlot } from "../../visualization";
 import { createModelODEPlot } from "./model_ode_plot";
@@ -92,14 +93,32 @@ export default function StochasticMassAction(
         }),
     ];
 
-    const plotResult = createModelODEPlot(
+    const result = createModelODEPlot(
         () => props.liveModel.validatedModel(),
         (model: DblModel) => props.simulate(model, props.content),
     );
 
+    const [autoUpdate, setAutoUpdate] = createSignal(true);
+    const [shouldUpdate, trigger] = createSignal(false);
+    const plotResult = createMemo(
+        on(
+            () => (autoUpdate() ? result() : shouldUpdate()),
+            () => result(),
+        ),
+    );
+
+    const execute = () => (
+        <ExecuteGuard
+            text="Execute"
+            triggerText="auto-simulate"
+            canTrigger={[autoUpdate, setAutoUpdate]}
+            shouldTrigger={[shouldUpdate, trigger]}
+        />
+    );
+
     return (
         <div class="simulation">
-            <BlockTitle title={props.title} />
+            <BlockTitle title={props.title} settingsPane={execute()} />
             <Foldable title="Parameters" defaultExpanded>
                 <div class="parameters">
                     <FixedTableEditor rows={obGenerators()} schema={obSchema} />