hyeonju-u/mini_react

How hyeonju-u/mini_react works

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: app.js Dashboard state · mini-react.js Components and hooks · vdom.js Virtual DOM model · main.js Phase one demo

Components 16

VOC Dashboard

VOC entry src/voc/main.js
Dashboard state src/voc/app.js
Dataset loader src/voc/data.js
Sample inquiries data/inquiries.sample.json
Filters and detection src/voc/analysis.js
Detection settings src/voc/config.js
Evidence pagination src/voc/pagination.js
Dashboard views src/voc/components.js

Mini React Runtime

Components and hooks src/mini-react.js

Virtual DOM Engine

Virtual DOM model src/vdom.js
Tree diff src/diff.js
DOM renderer src/dom.js
DOM patcher src/patch.js

DOM Demo

Phase one demo src/main.js
State history src/history.js

Other components

Dashboard user

Connections 30

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

Drawn by GitDiagram on November 10, 2026 from the repository's file tree, README and source files. Read as Markdown ·