# hyeonju-u/mini_react architecture

> Architecture diagram of the GitHub repository hyeonju-u/mini_react, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-10). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/hyeonju-u/mini_react
- Repository: https://github.com/hyeonju-u/mini_react

## Overview

This repository combines a small React-like rendering runtime with a VOC anomaly-detection dashboard built on it. The primary workflow loads and validates inquiry data, applies filters, detects and summarizes anomalies, then displays signal details, charts, and paginated evidence. A separate demo exercises virtual-DOM editing and history. The graph preserves both product branches and the rendering layers they share; unsampled UI details are represented at their source-directory level, and edges are limited to documented or excerpted relationships.

Main entry points: [`src/voc/app.js`](https://github.com/hyeonju-u/mini_react/blob/main/src/voc/app.js) (Dashboard state), [`src/mini-react.js`](https://github.com/hyeonju-u/mini_react/blob/main/src/mini-react.js) (Components and hooks), [`src/vdom.js`](https://github.com/hyeonju-u/mini_react/blob/main/src/vdom.js) (Virtual DOM model), [`src/main.js`](https://github.com/hyeonju-u/mini_react/blob/main/src/main.js) (Phase one demo)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_voc["VOC Dashboard"]
  node_voc_entry["VOC entry<br/>[main.js]"]
  node_app["Dashboard state<br/>[app.js]"]
  node_data["Dataset loader<br/>[data.js]"]
  node_sample["Sample inquiries"]
  node_analysis["Filters and detection<br/>[analysis.js]"]
  node_config["Detection settings<br/>[config.js]"]
  node_pagination["Evidence pagination<br/>[pagination.js]"]
  node_components["Dashboard views<br/>[components.js]"]
end

subgraph group_runtime["Mini React Runtime"]
  node_mini["Components and hooks<br/>[mini-react.js]"]
end

subgraph group_vdom["Virtual DOM Engine"]
  node_vdom["Virtual DOM model<br/>[vdom.js]"]
  node_diff["Tree diff<br/>[diff.js]"]
  node_dom["DOM renderer<br/>[dom.js]"]
  node_patch["DOM patcher<br/>[patch.js]"]
end

subgraph group_demo["DOM Demo"]
  node_demo["Phase one demo<br/>[main.js]"]
  node_history["State history<br/>[history.js]"]
end

node_user(("Dashboard user"))

node_user -->|"opens dashboard"| node_voc_entry
node_voc_entry -->|"mounts"| node_app
node_app -->|"loads data"| node_data
node_data -->|"fetches"| node_sample
node_app -->|"filters and detects"| node_analysis
node_app -->|"paginates evidence"| node_pagination
node_app -->|"reads page size"| node_config
node_app -->|"renders views"| node_components
node_app -->|"uses hooks and elements"| node_mini
node_analysis -->|"uses thresholds"| node_config
node_data -->|"validates fields"| node_config
node_components -->|"builds elements"| node_mini
node_components -->|"formats signals"| node_analysis
node_components -->|"shows page controls"| node_pagination
node_components -->|"uses display settings"| node_config
node_mini -->|"freezes trees"| node_vdom
node_mini -->|"renders and dispatches events"| node_dom
node_mini -->|"compares trees"| node_diff
node_mini -->|"applies updates"| node_patch
node_diff -->|"uses node types"| node_vdom
node_dom -->|"uses tree helpers"| node_vdom
node_patch -->|"updates elements"| node_dom
node_patch -->|"resolves child containers"| node_vdom
node_patch -->|"handles change kinds"| node_diff
node_demo -->|"converts markup"| node_vdom
node_demo -->|"renders preview"| node_dom
node_demo -->|"computes changes"| node_diff
node_demo -->|"patches live DOM"| node_patch
node_demo -->|"records and navigates"| node_history
node_history -->|"stores snapshots"| node_vdom

click node_voc_entry "https://github.com/hyeonju-u/mini_react/blob/main/src/voc/main.js"
click node_app "https://github.com/hyeonju-u/mini_react/blob/main/src/voc/app.js"
click node_data "https://github.com/hyeonju-u/mini_react/blob/main/src/voc/data.js"
click node_sample "https://github.com/hyeonju-u/mini_react/blob/main/data/inquiries.sample.json"
click node_analysis "https://github.com/hyeonju-u/mini_react/blob/main/src/voc/analysis.js"
click node_config "https://github.com/hyeonju-u/mini_react/blob/main/src/voc/config.js"
click node_pagination "https://github.com/hyeonju-u/mini_react/blob/main/src/voc/pagination.js"
click node_components "https://github.com/hyeonju-u/mini_react/blob/main/src/voc/components.js"
click node_mini "https://github.com/hyeonju-u/mini_react/blob/main/src/mini-react.js"
click node_vdom "https://github.com/hyeonju-u/mini_react/blob/main/src/vdom.js"
click node_diff "https://github.com/hyeonju-u/mini_react/blob/main/src/diff.js"
click node_dom "https://github.com/hyeonju-u/mini_react/blob/main/src/dom.js"
click node_patch "https://github.com/hyeonju-u/mini_react/blob/main/src/patch.js"
click node_demo "https://github.com/hyeonju-u/mini_react/blob/main/src/main.js"
click node_history "https://github.com/hyeonju-u/mini_react/blob/main/src/history.js"

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_voc_entry,node_app,node_data,node_sample,node_analysis,node_config,node_pagination,node_components,node_user toneBlue
class node_mini toneAmber
class node_vdom,node_diff,node_dom,node_patch toneMint
class node_demo,node_history toneRose
```

## Components

### VOC Dashboard

- [VOC entry](https://github.com/hyeonju-u/mini_react/blob/main/src/voc/main.js): `src/voc/main.js`
- [Dashboard state](https://github.com/hyeonju-u/mini_react/blob/main/src/voc/app.js): `src/voc/app.js`
- [Dataset loader](https://github.com/hyeonju-u/mini_react/blob/main/src/voc/data.js): `src/voc/data.js`
- [Sample inquiries](https://github.com/hyeonju-u/mini_react/blob/main/data/inquiries.sample.json): `data/inquiries.sample.json`
- [Filters and detection](https://github.com/hyeonju-u/mini_react/blob/main/src/voc/analysis.js): `src/voc/analysis.js`
- [Detection settings](https://github.com/hyeonju-u/mini_react/blob/main/src/voc/config.js): `src/voc/config.js`
- [Evidence pagination](https://github.com/hyeonju-u/mini_react/blob/main/src/voc/pagination.js): `src/voc/pagination.js`
- [Dashboard views](https://github.com/hyeonju-u/mini_react/blob/main/src/voc/components.js): `src/voc/components.js`

### Mini React Runtime

- [Components and hooks](https://github.com/hyeonju-u/mini_react/blob/main/src/mini-react.js): `src/mini-react.js`

### Virtual DOM Engine

- [Virtual DOM model](https://github.com/hyeonju-u/mini_react/blob/main/src/vdom.js): `src/vdom.js`
- [Tree diff](https://github.com/hyeonju-u/mini_react/blob/main/src/diff.js): `src/diff.js`
- [DOM renderer](https://github.com/hyeonju-u/mini_react/blob/main/src/dom.js): `src/dom.js`
- [DOM patcher](https://github.com/hyeonju-u/mini_react/blob/main/src/patch.js): `src/patch.js`

### DOM Demo

- [Phase one demo](https://github.com/hyeonju-u/mini_react/blob/main/src/main.js): `src/main.js`
- [State history](https://github.com/hyeonju-u/mini_react/blob/main/src/history.js): `src/history.js`

### Other components

- **Dashboard user**

## Connections

- Dashboard user → VOC entry: opens dashboard (evidence: `README.md`)
- VOC entry → Dashboard state: mounts (evidence: `src/voc/main.js`)
- Dashboard state → Dataset loader: loads data (evidence: `src/voc/app.js`)
- Dataset loader → Sample inquiries: fetches (evidence: `README.md`)
- Dashboard state → Filters and detection: filters and detects (evidence: `src/voc/app.js`)
- Dashboard state → Evidence pagination: paginates evidence (evidence: `src/voc/app.js`)
- Dashboard state → Detection settings: reads page size (evidence: `src/voc/app.js`)
- Dashboard state → Dashboard views: renders views (evidence: `src/voc/app.js`)
- Dashboard state → Components and hooks: uses hooks and elements (evidence: `src/voc/app.js`)
- Filters and detection → Detection settings: uses thresholds (evidence: `src/voc/analysis.js`)
- Dataset loader → Detection settings: validates fields (evidence: `src/voc/data.js`)
- Dashboard views → Components and hooks: builds elements (evidence: `src/voc/components.js`)
- Dashboard views → Filters and detection: formats signals (evidence: `src/voc/components.js`)
- Dashboard views → Evidence pagination: shows page controls (evidence: `src/voc/components.js`)
- Dashboard views → Detection settings: uses display settings (evidence: `src/voc/components.js`)
- Components and hooks → Virtual DOM model: freezes trees (evidence: `src/mini-react.js`)
- Components and hooks → DOM renderer: renders and dispatches events (evidence: `src/mini-react.js`)
- Components and hooks → Tree diff: compares trees (evidence: `src/mini-react.js`)
- Components and hooks → DOM patcher: applies updates (evidence: `src/mini-react.js`)
- Tree diff → Virtual DOM model: uses node types (evidence: `src/diff.js`)
- DOM renderer → Virtual DOM model: uses tree helpers (evidence: `src/dom.js`)
- DOM patcher → DOM renderer: updates elements (evidence: `src/patch.js`)
- DOM patcher → Virtual DOM model: resolves child containers (evidence: `src/patch.js`)
- DOM patcher → Tree diff: handles change kinds (evidence: `src/patch.js`)
- Phase one demo → Virtual DOM model: converts markup (evidence: `src/main.js`)
- Phase one demo → DOM renderer: renders preview (evidence: `src/main.js`)
- Phase one demo → Tree diff: computes changes (evidence: `src/main.js`)
- Phase one demo → DOM patcher: patches live DOM (evidence: `src/main.js`)
- Phase one demo → State history: records and navigates (evidence: `src/main.js`)
- State history → Virtual DOM model: stores snapshots (evidence: `src/history.js`)