Skip to content

Run analysis simulations in webworkers #1105

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jmoggr wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Run analysis simulations in webworkers #1105

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5536323
simulation workers
jmoggr Mar 9, 2026
be21ec5
Merge branch 'main' into simulation-webworkers
jmoggr Mar 16, 2026
416d428
REFACTOR: Extract debounce utility and use across frontend.
jmoggr Mar 16, 2026
81b4cf9
FIX: Read theoryId and refId at request time instead of capturing once.
jmoggr Mar 16, 2026
f1be0cb
REFACTOR: Use unwrap instead of JSON roundtrip for worker serialization.
jmoggr Mar 16, 2026
74a9320
DOC: Remove outdated comment about main thread in ODE latex docstring.
jmoggr Mar 16, 2026
6ad483b
CLEANUP: Remove files accidentally included in merge.
jmoggr Mar 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 29 additions & 27 deletions packages/frontend/src/stdlib/analyses.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,15 @@ import type { DiagramAnalysisMeta, ModelAnalysisMeta } from "../theory";
import * as GraphLayoutConfig from "../visualization/graph_layout_config";
import type * as Checkers from "./analyses/checker_types";
import { defaultSchemaERDConfig, type SchemaERDConfig } from "./analyses/schema_erd_config";
import type * as Simulators from "./analyses/simulator_types";
import type {
DecapodesAnalysisContent,
KuramotoProblemData,
LinearODEProblemData,
LotkaVolterraProblemData,
MassActionEquations,
MassActionProblemData,
UnbalancedMassActionEquations,
} from "./analyses/simulator_types";
import type * as SQLDownloadConfig from "./analyses/sql";
import { SQLBackend, type SQLRenderer } from "./analyses/sql_types";

Expand All @@ -18,7 +26,7 @@ type AnalysisOptions = {

export const decapodes = (
options: AnalysisOptions,
): DiagramAnalysisMeta<Simulators.DecapodesAnalysisContent> => ({
): DiagramAnalysisMeta<DecapodesAnalysisContent> => ({
...options,
component: (props) => <Decapodes {...props} />,
initialContent: () => ({
Expand Down Expand Up @@ -55,20 +63,18 @@ const TabularView = lazy(() => import("./analyses/tabular_view"));

export function kuramoto(
options: Partial<AnalysisOptions> & {
simulate: Simulators.KuramotoSimulator;
parameterLabels?: {
coupling?: string;
damping?: string;
forcing?: string;
};
},
): ModelAnalysisMeta<Simulators.KuramotoProblemData> {
): ModelAnalysisMeta<KuramotoProblemData> {
const {
id = "kuramoto",
name = "Kuramoto dynamics",
description = "Simulate the system using the Kuramoto dynamical model",
help = "kuramoto",
simulate,
} = options;
return {
id,
Expand All @@ -77,7 +83,7 @@ export function kuramoto(
help,
component: (props) => (
<Kuramoto
simulate={simulate}
analysisId={id}
title={name}
couplingLabel={options.parameterLabels?.coupling}
dampingLabel={options.parameterLabels?.damping}
Expand All @@ -100,23 +106,20 @@ export function kuramoto(
const Kuramoto = lazy(() => import("./analyses/kuramoto"));

export function linearODE(
options: Partial<AnalysisOptions> & {
simulate: Simulators.LinearODESimulator;
},
): ModelAnalysisMeta<Simulators.LinearODEProblemData> {
options: Partial<AnalysisOptions> = {},
): ModelAnalysisMeta<LinearODEProblemData> {
const {
id = "linear-ode",
name = "Linear ODE dynamics",
description = "Simulate the system using a constant-coefficient linear first-order ODE",
help = "linear-ode",
simulate,
} = options;
return {
id,
name,
description,
help,
component: (props) => <LinearODE simulate={simulate} title={name} {...props} />,
component: (props) => <LinearODE analysisId={id} title={name} {...props} />,
initialContent: () => ({
coefficients: {},
initialValues: {},
Expand All @@ -128,23 +131,20 @@ export function linearODE(
const LinearODE = lazy(() => import("./analyses/linear_ode"));

export function lotkaVolterra(
options: Partial<AnalysisOptions> & {
simulate: Simulators.LotkaVolterraSimulator;
},
): ModelAnalysisMeta<Simulators.LotkaVolterraProblemData> {
options: Partial<AnalysisOptions> = {},
): ModelAnalysisMeta<LotkaVolterraProblemData> {
const {
id = "lotka-volterra",
name = "Lotka-Volterra dynamics",
description = "Simulate the system using a Lotka-Volterra ODE",
help = "lotka-volterra",
simulate,
} = options;
return {
id,
name,
description,
help,
component: (props) => <LotkaVolterra simulate={simulate} title={name} {...props} />,
component: (props) => <LotkaVolterra analysisId={id} title={name} {...props} />,
initialContent: () => ({
interactionCoefficients: {},
growthRates: {},
Expand All @@ -158,11 +158,10 @@ const LotkaVolterra = lazy(() => import("./analyses/lotka_volterra"));

export function massAction(
options: Partial<AnalysisOptions> & {
simulate: Simulators.MassActionSimulator;
stateType?: ObType;
transitionType?: MorType;
},
): ModelAnalysisMeta<Simulators.MassActionProblemData> {
} = {},
): ModelAnalysisMeta<MassActionProblemData> {
const {
id = "mass-action",
name = "Mass-action dynamics",
Expand All @@ -175,7 +174,9 @@ export function massAction(
name,
description,
help,
component: (props) => <MassAction title={name} {...otherOptions} {...props} />,
component: (props) => (
<MassAction analysisId={id} title={name} {...otherOptions} {...props} />
),
initialContent: () => ({
massConservationType: { type: "Balanced" },
rates: {},
Expand All @@ -193,7 +194,7 @@ const MassAction = lazy(() => import("./analyses/mass_action"));

export function massActionEquations(
options: Partial<AnalysisOptions> & {
getEquations: Simulators.MassActionEquations;
getEquations: MassActionEquations;
},
): ModelAnalysisMeta<Record<string, never>> {
const {
Expand All @@ -218,7 +219,7 @@ const MassActionEquationsDisplay = lazy(() => import("./analyses/mass_action_equ

export function unbalancedMassActionEquations(
options: Partial<AnalysisOptions> & {
getEquations: Simulators.UnbalancedMassActionEquations;
getEquations: UnbalancedMassActionEquations;
},
): ModelAnalysisMeta<Record<string, never>> {
const {
Expand Down Expand Up @@ -250,10 +251,9 @@ const UnbalancedMassActionEquationsDisplay = lazy(

export function stochasticMassAction(
options: Partial<AnalysisOptions> & {
simulate: Simulators.StochasticMassActionSimulator;
stateType?: ObType;
transitionType?: MorType;
},
} = {},
): ModelAnalysisMeta<StochasticMassActionProblemData> {
const {
id = "stochastic-mass-action",
Expand All @@ -267,7 +267,9 @@ export function stochasticMassAction(
name,
description,
help,
component: (props) => <StochasticMassAction title={name} {...otherOptions} {...props} />,
component: (props) => (
<StochasticMassAction analysisId={id} title={name} {...otherOptions} {...props} />
),
initialContent: () => ({
rates: {},
initialValues: {},
Expand Down
13 changes: 7 additions & 6 deletions packages/frontend/src/stdlib/analyses/kuramoto.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,19 +7,18 @@ import {
FixedTableEditor,
Foldable,
} from "catcolab-ui-components";
import type { DblModel, KuramotoProblemData, QualifiedName } from "catlog-wasm";
import type { KuramotoProblemData, QualifiedName } from "catlog-wasm";
import type { ModelAnalysisProps } from "../../analysis";
import { morLabelOrDefault } from "../../model";
import { ODEResultPlot } from "../../visualization";
import { createModelODEPlot } from "./model_ode_plot";
import type { KuramotoSimulator } from "./simulator_types";

import "./simulation.css";

/** Analyse a model using first- or second-order Kuramoto dynamics. */
export default function Kuramoto(
props: ModelAnalysisProps<KuramotoProblemData> & {
simulate: KuramotoSimulator;
analysisId: string;
Comment thread
kasbah marked this conversation as resolved.
title?: string;
couplingLabel?: string;
dampingLabel?: string;
Expand Down Expand Up @@ -130,9 +129,10 @@ export default function Kuramoto(
}),
];

const plotResult = createModelODEPlot(
() => props.liveModel.validatedModel(),
(model: DblModel) => props.simulate(model, props.content),
const { data: plotResult, loading } = createModelODEPlot(
props.liveModel,
props.analysisId,
() => props.content,
);

return (
Expand All @@ -153,6 +153,7 @@ export default function Kuramoto(
</Foldable>
<ODEResultPlot
result={plotResult()}
loading={loading()}
yAxis={{
type: "value",
min: -Math.PI,
Expand Down
14 changes: 7 additions & 7 deletions packages/frontend/src/stdlib/analyses/linear_ode.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,18 @@ import {
FixedTableEditor,
Foldable,
} from "catcolab-ui-components";
import type { DblModel, LinearODEProblemData, QualifiedName } from "catlog-wasm";
import type { LinearODEProblemData, QualifiedName } from "catlog-wasm";
import type { ModelAnalysisProps } from "../../analysis";
import { morLabelOrDefault } from "../../model";
import { ODEResultPlot } from "../../visualization";
import { createModelODEPlot } from "./model_ode_plot";
import type { LinearODESimulator } from "./simulator_types";

import "./simulation.css";

/** Analyze a model using LinearODE dynamics. */
export default function LinearODE(
props: ModelAnalysisProps<LinearODEProblemData> & {
simulate: LinearODESimulator;
analysisId: string;
title?: string;
},
) {
Expand Down Expand Up @@ -70,9 +69,10 @@ export default function LinearODE(
}),
];

const plotResult = createModelODEPlot(
() => props.liveModel.validatedModel(),
(model: DblModel) => props.simulate(model, props.content),
const { data: plotResult, loading } = createModelODEPlot(
props.liveModel,
props.analysisId,
() => props.content,
);

return (
Expand All @@ -91,7 +91,7 @@ export default function LinearODE(
<FixedTableEditor rows={[null]} schema={toplevelSchema} />
</div>
</Foldable>
<ODEResultPlot result={plotResult()} />
<ODEResultPlot result={plotResult()} loading={loading()} />
</div>
);
}
14 changes: 7 additions & 7 deletions packages/frontend/src/stdlib/analyses/lotka_volterra.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,18 @@ import {
FixedTableEditor,
Foldable,
} from "catcolab-ui-components";
import type { DblModel, LotkaVolterraProblemData, QualifiedName } from "catlog-wasm";
import type { LotkaVolterraProblemData, QualifiedName } from "catlog-wasm";
import type { ModelAnalysisProps } from "../../analysis";
import { morLabelOrDefault } from "../../model";
import { ODEResultPlot } from "../../visualization";
import { createModelODEPlot } from "./model_ode_plot";
import type { LotkaVolterraSimulator } from "./simulator_types";

import "./simulation.css";

/** Analyze a model using Lotka-Volterra dynamics. */
export default function LotkaVolterra(
props: ModelAnalysisProps<LotkaVolterraProblemData> & {
simulate: LotkaVolterraSimulator;
analysisId: string;
title?: string;
},
) {
Expand Down Expand Up @@ -78,9 +77,10 @@ export default function LotkaVolterra(
}),
];

const plotResult = createModelODEPlot(
() => props.liveModel.validatedModel(),
(model: DblModel) => props.simulate(model, props.content),
const { data: plotResult, loading } = createModelODEPlot(
props.liveModel,
props.analysisId,
() => props.content,
);

return (
Expand All @@ -99,7 +99,7 @@ export default function LotkaVolterra(
<FixedTableEditor rows={[null]} schema={toplevelSchema} />
</div>
</Foldable>
<ODEResultPlot result={plotResult()} />
<ODEResultPlot result={plotResult()} loading={loading()} />
</div>
);
}
14 changes: 7 additions & 7 deletions packages/frontend/src/stdlib/analyses/mass_action.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,13 @@ import { morLabelOrDefault } from "../../model";
import { ODEResultPlot } from "../../visualization";
import { MassActionConfigForm } from "./mass_action_config_form";
import { createModelODEPlotWithEquations } from "./model_ode_plot";
import type { MassActionSimulator } from "./simulator_types";

import "./simulation.css";

/** Analyze a model using mass-action dynamics. */
export default function MassAction(
props: ModelAnalysisProps<MassActionProblemData> & {
simulate: MassActionSimulator;
analysisId: string;
stateType?: ObType;
transitionType?: MorType;
title?: string;
Expand Down Expand Up @@ -290,12 +289,13 @@ export default function MassAction(
];

const result = createModelODEPlotWithEquations(
() => props.liveModel.validatedModel(),
(model) => props.simulate(model, props.content),
props.liveModel,
props.analysisId,
() => props.content,
);

const plotResult = () => result()?.plotData;
const latexEquations = () => result()?.latexEquations ?? [];
const plotResult = () => result.data()?.plotData;
const latexEquations = () => result.data()?.latexEquations ?? [];

// The option to change RateGranularity should only be visible when working
// with models in a theory that supports multiple inputs/outputs to morphisms
Expand Down Expand Up @@ -335,7 +335,7 @@ export default function MassAction(
<div class="parameters">
<FixedTableEditor rows={[null]} schema={toplevelSchema} />
</div>
<ODEResultPlot result={plotResult()} />
<ODEResultPlot result={plotResult()} loading={result.loading()} />
</Foldable>
</div>
);
Expand Down
Loading