# skredx/dip-lab architecture

> Architecture diagram of the GitHub repository skredx/dip-lab, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/skredx/dip-lab
- Repository: https://github.com/skredx/dip-lab

## Overview

DIP Lab is an interactive digital-image-processing learning platform. A learner opens a curriculum topic, adjusts its controls or image source, and explores a live lab stage with plots, images, and—when enabled—generated mathematical steps. The graph separates curriculum and routing, shared workbench UI, lab implementations, image-processing algorithms, and derivation logic. README capabilities such as linked pixel/histogram selection and the five-unit curriculum are documented, but their full wiring and unsampled lab implementations were not inspected; those relationships are not presented as verified calls.

Main entry points: [`src/pages/LabPage.tsx`](https://github.com/skredx/dip-lab/blob/main/src/pages/LabPage.tsx) (Lab page), [`src/labs/unit1Labs.tsx`](https://github.com/skredx/dip-lab/blob/main/src/labs/unit1Labs.tsx) (Fundamentals labs), [`src/labs/registryMap.ts`](https://github.com/skredx/dip-lab/blob/main/src/labs/registryMap.ts) (Lab registry), [`src/labs/unit2Labs.tsx`](https://github.com/skredx/dip-lab/blob/main/src/labs/unit2Labs.tsx) (Histogram labs)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_curriculum["Curriculum and routing"]
  node_app["App routes<br/>[App.tsx]"]
  node_landing["Topic landing<br/>[LandingPage.tsx]"]
  node_catalog["Topic catalog<br/>[registry.ts]"]
  node_labpage["Lab page<br/>[LabPage.tsx]"]
  node_dispatch["Lab registry<br/>[registryMap.ts]"]
  node_intro["Topic introductions<br/>[topicIntros.ts]"]
end

subgraph group_workbench["Workbench interface"]
  node_layout["Lab workbench<br/>[LabLayout.tsx]"]
  node_controls["Lab controls<br/>[Slider.tsx]"]
  node_imagepicker["Image picker<br/>[ImagePicker.tsx]"]
  node_state["Shared interaction state<br/>[store.ts]"]
  node_visuals["Plots and image views<br/>[CanvasImage.tsx]"]
  node_mathview["Math display<br/>[KatexView.tsx]"]
end

subgraph group_labs["Interactive labs"]
  node_unit1["Fundamentals labs<br/>[unit1Labs.tsx]"]
  node_unit2["Histogram labs<br/>[unit2Labs.tsx]"]
  node_unit3["Spatial filtering labs<br/>[unit3Labs.tsx]"]
  node_unit4["Bilateral filtering labs<br/>[unit4Labs.tsx]"]
  node_unit5["Image formation labs<br/>[unit5Labs.tsx]"]
end

subgraph group_image["Image processing"]
  node_procedural["Procedural images<br/>[procedural.ts]"]
  node_histogram["Histogram analysis<br/>[histogram.ts]"]
  node_lut["Lookup tables<br/>[lut.ts]"]
  node_transforms["Image transforms<br/>[transforms.ts]"]
  node_filters["Spatial filters<br/>[filters.ts]"]
  node_formation["Image formation<br/>[formation.ts]"]
end

subgraph group_math["Math derivations"]
  node_steps["Step derivation engine<br/>[stepEngine.ts]"]
  node_advanced["Advanced derivation drawer<br/>[AdvancedDrawer.tsx]"]
end

node_learner(("Learner"))

node_learner -->|"opens"| node_app
node_app -->|"routes to"| node_landing
node_app -->|"routes to"| node_labpage
node_landing -->|"lists topics"| node_catalog
node_labpage -->|"looks up topic"| node_catalog
node_labpage -->|"gets lab"| node_dispatch
node_dispatch -->|"dispatches"| node_unit1
node_dispatch -->|"dispatches"| node_unit2
node_dispatch -->|"dispatches"| node_unit3
node_dispatch -->|"dispatches"| node_unit4
node_dispatch -->|"dispatches"| node_unit5
node_labpage -->|"renders in"| node_layout
node_labpage -->|"renders"| node_controls
node_labpage -->|"renders"| node_imagepicker
node_labpage -->|"generates image"| node_procedural
node_labpage -->|"reads mode"| node_state
node_layout -->|"shows intro"| node_intro
node_layout -->|"shows steps"| node_advanced
node_layout -->|"reads mode"| node_state
node_controls -->|"updates"| node_state
node_imagepicker -->|"creates preset"| node_procedural
node_unit1 -->|"renders"| node_visuals
node_unit2 -->|"renders"| node_visuals
node_unit1 -->|"uses"| node_transforms
node_unit1 -->|"uses"| node_histogram
node_unit1 -->|"uses"| node_lut
node_unit1 -->|"builds derivations"| node_steps
node_unit1 -->|"renders notation"| node_mathview
node_unit2 -->|"uses"| node_histogram
node_unit2 -->|"uses"| node_lut
node_unit2 -->|"uses"| node_transforms
node_unit4 -->|"uses"| node_filters
node_unit4 -->|"uses"| node_transforms
node_unit4 -->|"builds derivations"| node_steps
node_steps -->|"provides steps"| node_advanced
node_learner -.->|"probes or brushes"| node_state
node_state -.->|"links highlights"| node_visuals
node_unit3 -.->|"uses filtering"| node_filters
node_unit5 -.->|"uses formation"| node_formation

click node_app "https://github.com/skredx/dip-lab/blob/main/src/App.tsx"
click node_landing "https://github.com/skredx/dip-lab/blob/main/src/pages/LandingPage.tsx"
click node_catalog "https://github.com/skredx/dip-lab/blob/main/src/content/registry.ts"
click node_labpage "https://github.com/skredx/dip-lab/blob/main/src/pages/LabPage.tsx"
click node_dispatch "https://github.com/skredx/dip-lab/blob/main/src/labs/registryMap.ts"
click node_intro "https://github.com/skredx/dip-lab/blob/main/src/content/topicIntros.ts"
click node_layout "https://github.com/skredx/dip-lab/blob/main/src/components/shell/LabLayout.tsx"
click node_controls "https://github.com/skredx/dip-lab/blob/main/src/components/controls/Slider.tsx"
click node_imagepicker "https://github.com/skredx/dip-lab/blob/main/src/components/controls/ImagePicker.tsx"
click node_state "https://github.com/skredx/dip-lab/blob/main/src/state/store.ts"
click node_visuals "https://github.com/skredx/dip-lab/blob/main/src/components/plots/CanvasImage.tsx"
click node_mathview "https://github.com/skredx/dip-lab/blob/main/src/components/math/KatexView.tsx"
click node_unit1 "https://github.com/skredx/dip-lab/blob/main/src/labs/unit1Labs.tsx"
click node_unit2 "https://github.com/skredx/dip-lab/blob/main/src/labs/unit2Labs.tsx"
click node_unit3 "https://github.com/skredx/dip-lab/blob/main/src/labs/unit3Labs.tsx"
click node_unit4 "https://github.com/skredx/dip-lab/blob/main/src/labs/unit4Labs.tsx"
click node_unit5 "https://github.com/skredx/dip-lab/blob/main/src/labs/unit5Labs.tsx"
click node_procedural "https://github.com/skredx/dip-lab/blob/main/src/engine/image/procedural.ts"
click node_histogram "https://github.com/skredx/dip-lab/blob/main/src/engine/image/histogram.ts"
click node_lut "https://github.com/skredx/dip-lab/blob/main/src/engine/image/lut.ts"
click node_transforms "https://github.com/skredx/dip-lab/blob/main/src/engine/image/transforms.ts"
click node_filters "https://github.com/skredx/dip-lab/blob/main/src/engine/image/filters.ts"
click node_formation "https://github.com/skredx/dip-lab/blob/main/src/engine/image/formation.ts"
click node_steps "https://github.com/skredx/dip-lab/blob/main/src/engine/math/stepEngine.ts"
click node_advanced "https://github.com/skredx/dip-lab/blob/main/src/components/shell/AdvancedDrawer.tsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_landing,node_catalog,node_labpage,node_dispatch,node_intro toneBlue
class node_layout,node_controls,node_imagepicker,node_state,node_visuals,node_mathview toneAmber
class node_unit1,node_unit2,node_unit3,node_unit4,node_unit5 toneMint
class node_procedural,node_histogram,node_lut,node_transforms,node_filters,node_formation toneRose
class node_steps,node_advanced,node_learner toneIndigo
```

## Components

### Curriculum and routing

- [App routes](https://github.com/skredx/dip-lab/blob/main/src/App.tsx): `src/App.tsx`
- [Topic landing](https://github.com/skredx/dip-lab/blob/main/src/pages/LandingPage.tsx): `src/pages/LandingPage.tsx`
- [Topic catalog](https://github.com/skredx/dip-lab/blob/main/src/content/registry.ts): `src/content/registry.ts`
- [Lab page](https://github.com/skredx/dip-lab/blob/main/src/pages/LabPage.tsx): `src/pages/LabPage.tsx`
- [Lab registry](https://github.com/skredx/dip-lab/blob/main/src/labs/registryMap.ts): `src/labs/registryMap.ts`
- [Topic introductions](https://github.com/skredx/dip-lab/blob/main/src/content/topicIntros.ts): `src/content/topicIntros.ts`

### Workbench interface

- [Lab workbench](https://github.com/skredx/dip-lab/blob/main/src/components/shell/LabLayout.tsx): `src/components/shell/LabLayout.tsx`
- [Lab controls](https://github.com/skredx/dip-lab/blob/main/src/components/controls/Slider.tsx): `src/components/controls/Slider.tsx`
- [Image picker](https://github.com/skredx/dip-lab/blob/main/src/components/controls/ImagePicker.tsx): `src/components/controls/ImagePicker.tsx`
- [Shared interaction state](https://github.com/skredx/dip-lab/blob/main/src/state/store.ts): `src/state/store.ts`
- [Plots and image views](https://github.com/skredx/dip-lab/blob/main/src/components/plots/CanvasImage.tsx): `src/components/plots/CanvasImage.tsx`
- [Math display](https://github.com/skredx/dip-lab/blob/main/src/components/math/KatexView.tsx): `src/components/math/KatexView.tsx`

### Interactive labs

- [Fundamentals labs](https://github.com/skredx/dip-lab/blob/main/src/labs/unit1Labs.tsx): `src/labs/unit1Labs.tsx`
- [Histogram labs](https://github.com/skredx/dip-lab/blob/main/src/labs/unit2Labs.tsx): `src/labs/unit2Labs.tsx`
- [Spatial filtering labs](https://github.com/skredx/dip-lab/blob/main/src/labs/unit3Labs.tsx): `src/labs/unit3Labs.tsx`
- [Bilateral filtering labs](https://github.com/skredx/dip-lab/blob/main/src/labs/unit4Labs.tsx): `src/labs/unit4Labs.tsx`
- [Image formation labs](https://github.com/skredx/dip-lab/blob/main/src/labs/unit5Labs.tsx): `src/labs/unit5Labs.tsx`

### Image processing

- [Procedural images](https://github.com/skredx/dip-lab/blob/main/src/engine/image/procedural.ts): `src/engine/image/procedural.ts`
- [Histogram analysis](https://github.com/skredx/dip-lab/blob/main/src/engine/image/histogram.ts): `src/engine/image/histogram.ts`
- [Lookup tables](https://github.com/skredx/dip-lab/blob/main/src/engine/image/lut.ts): `src/engine/image/lut.ts`
- [Image transforms](https://github.com/skredx/dip-lab/blob/main/src/engine/image/transforms.ts): `src/engine/image/transforms.ts`
- [Spatial filters](https://github.com/skredx/dip-lab/blob/main/src/engine/image/filters.ts): `src/engine/image/filters.ts`
- [Image formation](https://github.com/skredx/dip-lab/blob/main/src/engine/image/formation.ts): `src/engine/image/formation.ts`

### Math derivations

- [Step derivation engine](https://github.com/skredx/dip-lab/blob/main/src/engine/math/stepEngine.ts): `src/engine/math/stepEngine.ts`
- [Advanced derivation drawer](https://github.com/skredx/dip-lab/blob/main/src/components/shell/AdvancedDrawer.tsx): `src/components/shell/AdvancedDrawer.tsx`

### Other components

- **Learner**

## Connections

- Learner → App routes: opens (evidence: `src/App.tsx`)
- App routes → Topic landing: routes to (evidence: `src/App.tsx`)
- App routes → Lab page: routes to (evidence: `src/App.tsx`)
- Topic landing → Topic catalog: lists topics (evidence: `src/pages/LandingPage.tsx`)
- Lab page → Topic catalog: looks up topic (evidence: `src/pages/LabPage.tsx`)
- Lab page → Lab registry: gets lab (evidence: `src/pages/LabPage.tsx`)
- Lab registry → Fundamentals labs: dispatches (evidence: `src/labs/registryMap.ts`)
- Lab registry → Histogram labs: dispatches (evidence: `src/labs/registryMap.ts`)
- Lab registry → Spatial filtering labs: dispatches (evidence: `src/labs/registryMap.ts`)
- Lab registry → Bilateral filtering labs: dispatches (evidence: `src/labs/registryMap.ts`)
- Lab registry → Image formation labs: dispatches (evidence: `src/labs/registryMap.ts`)
- Lab page → Lab workbench: renders in (evidence: `src/pages/LabPage.tsx`)
- Lab page → Lab controls: renders (evidence: `src/pages/LabPage.tsx`)
- Lab page → Image picker: renders (evidence: `src/pages/LabPage.tsx`)
- Lab page → Procedural images: generates image (evidence: `src/pages/LabPage.tsx`)
- Lab page → Shared interaction state: reads mode (evidence: `src/pages/LabPage.tsx`)
- Lab workbench → Topic introductions: shows intro (evidence: `src/components/shell/LabLayout.tsx`)
- Lab workbench → Advanced derivation drawer: shows steps (evidence: `src/components/shell/LabLayout.tsx`)
- Lab workbench → Shared interaction state: reads mode (evidence: `src/components/shell/LabLayout.tsx`)
- Lab controls → Shared interaction state: updates (evidence: `src/components/controls/Slider.tsx`)
- Image picker → Procedural images: creates preset (evidence: `src/components/controls/ImagePicker.tsx`)
- Fundamentals labs → Plots and image views: renders (evidence: `src/labs/unit1Labs.tsx`)
- Histogram labs → Plots and image views: renders (evidence: `src/labs/unit2Labs.tsx`)
- Fundamentals labs → Image transforms: uses (evidence: `src/labs/unit1Labs.tsx`)
- Fundamentals labs → Histogram analysis: uses (evidence: `src/labs/unit1Labs.tsx`)
- Fundamentals labs → Lookup tables: uses (evidence: `src/labs/unit1Labs.tsx`)
- Fundamentals labs → Step derivation engine: builds derivations (evidence: `src/labs/unit1Labs.tsx`)
- Fundamentals labs → Math display: renders notation (evidence: `src/labs/unit1Labs.tsx`)
- Histogram labs → Histogram analysis: uses (evidence: `src/labs/unit2Labs.tsx`)
- Histogram labs → Lookup tables: uses (evidence: `src/labs/unit2Labs.tsx`)
- Histogram labs → Image transforms: uses (evidence: `src/labs/unit2Labs.tsx`)
- Bilateral filtering labs → Spatial filters: uses (evidence: `src/labs/unit4Labs.tsx`)
- Bilateral filtering labs → Image transforms: uses (evidence: `src/labs/unit4Labs.tsx`)
- Bilateral filtering labs → Step derivation engine: builds derivations (evidence: `src/labs/unit4Labs.tsx`)
- Step derivation engine → Advanced derivation drawer: provides steps
- Learner → Shared interaction state: probes or brushes (evidence: `README.md`)
- Shared interaction state → Plots and image views: links highlights (evidence: `README.md`)
- Spatial filtering labs → Spatial filters: uses filtering
- Image formation labs → Image formation: uses formation