# Model Lab

Pick any model from the science engine, move the sliders and watch it change live. Physics (Newton, pendulum, spring, orbit, incline, collision, projectile, fluid flow, waves), chemistry (atoms, molecules), biology (DNA, cell, population growth) and math (functions, lines, trigonometry, surfaces, quadratics) all come from one catalog.

`@indoku/science` decides which models exist and which knobs they have (`catalog.list()`), and computes every frame (`catalog.build()`). `ModelLab` only draws the controls and the scene, so a new model in the engine shows up here with no UI change.

Group: Science

## Import

```tsx
import { ModelLab } from "@indoku/ui"
import { catalog } from "@indoku/science"

<ModelLab catalog={catalog} />
```

## Examples

### Every model

All categories. Switch the tab, pick a model, drag a slider.

```tsx
function LabAll() {
  return <ModelLab catalog={catalog} renderLatex={renderLatex} />
}
```

### Physics: Newton and friends

Raise the friction until the block stops: F − μmg = ma.

```tsx
function LabPhysics() {
  return <ModelLab catalog={catalog} categories={["physics"]} defaultModel="newton-second" renderLatex={renderLatex} />
}
```

### Atoms, molecules, DNA, cells

Change the atomic number from 1 to 18 and the shells refill.

```tsx
function LabLifeScience() {
  return <ModelLab catalog={catalog} categories={["chemistry", "biology"]} defaultModel="bohr-atom" renderLatex={renderLatex} />
}
```

### Math: functions, lines, trigonometry

Type any expression of x, e.g. `x^3 - 4*x` or `sin(x)/x*5`.

```tsx
function LabMath() {
  return <ModelLab catalog={catalog} categories={["math"]} defaultModel="function-plot" renderLatex={renderLatex} />
}
```

## Props

### ModelLab

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `catalog` * | `{ list(category?): ModelInfo[]; build(id, params?): Scene }` |  | `catalog` from `@indoku/science`, or any object with the same two methods. |
| `defaultModel` | `string` |  | Model id shown first. |
| `categories` | `string[]` |  | Limit the tabs: physics, chemistry, biology, math, shapes. |
| `renderLatex` | `(latex: string) => ReactNode` |  | Shows the formula lines of each scene, e.g. `(latex) => <MathRenderer latex={latex} />`. |
| `view3d` | `(scene, t) => ReactNode` |  | Custom 3D renderer. Default: `Plot3D`. |
| `height` | `number` | `380` | Height of the built-in 3D viewport, in px. |

`*` = required. Style props and HTML attributes are accepted too.

## Notes

- Add your own model with `registerModel({ id, title, category, params, build })` from `@indoku/science`; it appears in the lab automatically.

## See also

- Plot 2D: https://ui.indoku.org/docs/plot-2d
- Plot 3D: https://ui.indoku.org/docs/plot-3d
- Graph 2D: https://ui.indoku.org/docs/graph-2d