# guiqui/react-timeline-gantt architecture

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

- Interactive diagram: https://gitdiagram.com/guiqui/react-timeline-gantt
- Repository: https://github.com/guiqui/react-timeline-gantt

## Overview

react-gantt-timeline is a React calendar Gantt component for displaying and interacting with tasks and task-dependency links. A consumer supplies task/link data and callbacks; the timeline coordinates the calendar header, task list, task viewport, and link viewport. Scrolling requests additional date ranges, while task edits, selection, and link creation are reported to the consumer rather than stored as application state by the component. The README documents paging, CRUD integration, customization, and day/week/month/year modes. Some rendering and callback wiring is inferred from the component structure; unsampled internals are represented only where the tree and documentation support them.

Main entry points: [`src/lib/TimeLine.js`](https://github.com/guiqui/react-timeline-gantt/blob/master/src/lib/TimeLine.js) (Timeline component), [`src/lib/components/links/LinkViewPort.js`](https://github.com/guiqui/react-timeline-gantt/blob/master/src/lib/components/links/LinkViewPort.js) (Link viewport), [`src/lib/components/taskList/TaskList.js`](https://github.com/guiqui/react-timeline-gantt/blob/master/src/lib/components/taskList/TaskList.js) (Task list), [`src/lib/controller/DataController.js`](https://github.com/guiqui/react-timeline-gantt/blob/master/src/lib/controller/DataController.js) (Horizon controller)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_timeline["Timeline coordination"]
  node_timeline["Timeline component<br/>[TimeLine.js]"]
  node_controller["Horizon controller<br/>[DataController.js]"]
  node_header["Calendar header<br/>[Headers.js]"]
  node_splitter["List splitter<br/>[VerticalSpliter.js]"]
end

subgraph group_tasks["Task display and editing"]
  node_tasklist["Task list<br/>[TaskList.js]"]
  node_editable["Editable text<br/>[ContentEditable.js]"]
  node_dataview["Task viewport<br/>[DataViewPort.js]"]
  node_datatask["Task bar<br/>[DataTask.js]"]
end

subgraph group_links["Dependency links"]
  node_linkview["Link viewport<br/>[LinkViewPort.js]"]
  node_link["Dependency link<br/>[Link.js]"]
  node_createlink["Link creation<br/>[CreateLink.js]"]
end

subgraph group_support["Time and configuration"]
  node_registry["Task registry<br/>[Registry.js]"]
  node_datehelper["Date mapping<br/>[DateHelper.js]"]
  node_config["Display configuration<br/>[Config.js]"]
end

node_consumer(("Application consumer"))
node_moment["Moment date library"]

node_consumer -->|"supplies data"| node_timeline
node_timeline -->|"reports interactions"| node_consumer
node_timeline -->|"requests horizon"| node_controller
node_controller -->|"converts dates"| node_datehelper
node_controller -->|"notifies range"| node_timeline
node_timeline -->|"renders"| node_header
node_timeline -->|"renders"| node_tasklist
node_timeline -->|"renders"| node_dataview
node_timeline -->|"renders"| node_linkview
node_timeline -->|"renders"| node_splitter
node_tasklist -->|"renders"| node_editable
node_tasklist -->|"groups tasks"| node_registry
node_linkview -->|"looks up tasks"| node_registry
node_linkview -->|"renders links"| node_link
node_linkview -->|"renders creation"| node_createlink
node_header -->|"maps positions"| node_datehelper
node_linkview -->|"maps positions"| node_datehelper
node_header -.->|"formats dates"| node_moment
node_timeline -->|"loads settings"| node_config
node_tasklist -->|"reads settings"| node_config
node_datatask -->|"reads settings"| node_config

click node_timeline "https://github.com/guiqui/react-timeline-gantt/blob/master/src/lib/TimeLine.js"
click node_controller "https://github.com/guiqui/react-timeline-gantt/blob/master/src/lib/controller/DataController.js"
click node_header "https://github.com/guiqui/react-timeline-gantt/blob/master/src/lib/components/header/Headers.js"
click node_splitter "https://github.com/guiqui/react-timeline-gantt/blob/master/src/lib/components/taskList/VerticalSpliter.js"
click node_tasklist "https://github.com/guiqui/react-timeline-gantt/blob/master/src/lib/components/taskList/TaskList.js"
click node_editable "https://github.com/guiqui/react-timeline-gantt/blob/master/src/lib/components/common/ContentEditable.js"
click node_dataview "https://github.com/guiqui/react-timeline-gantt/blob/master/src/lib/components/viewport/DataViewPort.js"
click node_datatask "https://github.com/guiqui/react-timeline-gantt/blob/master/src/lib/components/viewport/DataTask.js"
click node_linkview "https://github.com/guiqui/react-timeline-gantt/blob/master/src/lib/components/links/LinkViewPort.js"
click node_link "https://github.com/guiqui/react-timeline-gantt/blob/master/src/lib/components/links/Link.js"
click node_createlink "https://github.com/guiqui/react-timeline-gantt/blob/master/src/lib/components/links/CreateLink.js"
click node_registry "https://github.com/guiqui/react-timeline-gantt/blob/master/src/lib/helpers/registry/Registry.js"
click node_datehelper "https://github.com/guiqui/react-timeline-gantt/blob/master/src/lib/helpers/DateHelper.js"
click node_config "https://github.com/guiqui/react-timeline-gantt/blob/master/src/lib/helpers/config/Config.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_timeline,node_controller,node_header,node_splitter toneBlue
class node_tasklist,node_editable,node_dataview,node_datatask toneAmber
class node_linkview,node_link,node_createlink toneMint
class node_registry,node_datehelper,node_config toneRose
class node_consumer,node_moment toneIndigo
```

## Components

### Timeline coordination

- [Timeline component](https://github.com/guiqui/react-timeline-gantt/blob/master/src/lib/TimeLine.js): `src/lib/TimeLine.js`
- [Horizon controller](https://github.com/guiqui/react-timeline-gantt/blob/master/src/lib/controller/DataController.js): `src/lib/controller/DataController.js`
- [Calendar header](https://github.com/guiqui/react-timeline-gantt/blob/master/src/lib/components/header/Headers.js): `src/lib/components/header/Headers.js`
- [List splitter](https://github.com/guiqui/react-timeline-gantt/blob/master/src/lib/components/taskList/VerticalSpliter.js): `src/lib/components/taskList/VerticalSpliter.js`

### Task display and editing

- [Task list](https://github.com/guiqui/react-timeline-gantt/blob/master/src/lib/components/taskList/TaskList.js): `src/lib/components/taskList/TaskList.js`
- [Editable text](https://github.com/guiqui/react-timeline-gantt/blob/master/src/lib/components/common/ContentEditable.js): `src/lib/components/common/ContentEditable.js`
- [Task viewport](https://github.com/guiqui/react-timeline-gantt/blob/master/src/lib/components/viewport/DataViewPort.js): `src/lib/components/viewport/DataViewPort.js`
- [Task bar](https://github.com/guiqui/react-timeline-gantt/blob/master/src/lib/components/viewport/DataTask.js): `src/lib/components/viewport/DataTask.js`

### Dependency links

- [Link viewport](https://github.com/guiqui/react-timeline-gantt/blob/master/src/lib/components/links/LinkViewPort.js): `src/lib/components/links/LinkViewPort.js`
- [Dependency link](https://github.com/guiqui/react-timeline-gantt/blob/master/src/lib/components/links/Link.js): `src/lib/components/links/Link.js`
- [Link creation](https://github.com/guiqui/react-timeline-gantt/blob/master/src/lib/components/links/CreateLink.js): `src/lib/components/links/CreateLink.js`

### Time and configuration

- [Task registry](https://github.com/guiqui/react-timeline-gantt/blob/master/src/lib/helpers/registry/Registry.js): `src/lib/helpers/registry/Registry.js`
- [Date mapping](https://github.com/guiqui/react-timeline-gantt/blob/master/src/lib/helpers/DateHelper.js): `src/lib/helpers/DateHelper.js`
- [Display configuration](https://github.com/guiqui/react-timeline-gantt/blob/master/src/lib/helpers/config/Config.js): `src/lib/helpers/config/Config.js`

### Other components

- **Application consumer**
- **Moment date library**

## Connections

- Application consumer → Timeline component: supplies data
- Timeline component → Application consumer: reports interactions
- Timeline component → Horizon controller: requests horizon
- Horizon controller → Date mapping: converts dates
- Horizon controller → Timeline component: notifies range
- Timeline component → Calendar header: renders
- Timeline component → Task list: renders
- Timeline component → Task viewport: renders
- Timeline component → Link viewport: renders
- Timeline component → List splitter: renders
- Task list → Editable text: renders
- Task list → Task registry: groups tasks
- Link viewport → Task registry: looks up tasks
- Link viewport → Dependency link: renders links
- Link viewport → Link creation: renders creation
- Calendar header → Date mapping: maps positions
- Link viewport → Date mapping: maps positions
- Calendar header → Moment date library: formats dates
- Timeline component → Display configuration: loads settings
- Task list → Display configuration: reads settings
- Task bar → Display configuration: reads settings