# @umriss-ui/schedule

> React Gantt-style schedule for data-dense applications - work on lanes over time, with dependencies, blocked time, findings and controlled editing.

Version 0.3.16. Install with `pnpm add @umriss-ui/schedule`. Every page below in full - its examples' source, its props tables generated from the code, and what it deliberately does not do - stands in one file: [llms-full.txt](https://romanhaendler.github.io/umriss-ui/schedule/llms-full.txt). The npm package carries the same text for the installed version as `docs/llms-full.md`; prefer that one when the package is installed.

## Scenarios

Composed, realistic screens built from the package.

- [Hand over the on-call week](https://romanhaendler.github.io/umriss-ui/schedule/#hand-over-the-on-call-week): The engineer going off call checks who carries the pager until next Monday and hands on the duties that fall into someone's leave.
- [Plan tomorrow's tours](https://romanhaendler.github.io/umriss-ui/schedule/#plan-tomorrows-tours): A dispatcher lays out tomorrow's delivery tours van by van and moves them until every stop arrives inside the window its customer was promised.
- [Plan the sprint around leave](https://romanhaendler.github.io/umriss-ui/schedule/#plan-the-sprint-around-leave): A team lead checks the running sprint against holidays, sick days and training, and moves the work that lands on someone who is away.
- [Replan the day on the line](https://romanhaendler.github.io/umriss-ui/schedule/#replan-the-day-on-the-line): A production planner at the tile works moves orders between machines during the day, lets the cascade follow and reads the findings before committing.

## Getting started

What an application installs and hands over before the first plan.

- [Installation](https://romanhaendler.github.io/umriss-ui/schedule/installation/): Install the schedule with its two peers and hand it plain data: lanes, tasks, subtasks and dependencies. It draws them and reports what a planner wants to change.

## Plan

What the schedule draws: work on lanes, and everything a bar says besides its colour.

- [First schedule](https://romanhaendler.github.io/umriss-ui/schedule/schedule/): Work on lanes over time, with a day band above and time ticks that follow the zoom (also called a Gantt chart, resource plan or timeline). Reach for it when a planner needs to see who or what is busy when, and what does not fit.
- [Lanes](https://romanhaendler.github.io/umriss-ui/schedule/lane/): One row per person, vehicle or room, named by its header and kept in the order it is declared, however many there are (also called resources).
- [Lane groups](https://romanhaendler.github.io/umriss-ui/schedule/lane-groups/): Teams, depots or regions over the lanes, to any depth, folded into one row when a planner wants only the part they work on.
- [Subtasks](https://romanhaendler.github.io/umriss-ui/schedule/subtasks/): The bars: a main time with an optional lead-in before it and lead-out after it, in the colour of the task they belong to (also called bookings or assignments).
- [Bar labels](https://romanhaendler.github.io/umriss-ui/schedule/bar-labels/): A line of text inside each bar: cut off where the bar is too narrow, left out where it would say nothing, and held at the view's edge while the bar runs on.
- [Appearances](https://romanhaendler.github.io/umriss-ui/schedule/appearances/): What a bar says besides its colour: provisional, fixed, muted, running on past the view, and how far the work has got. Each takes one channel of the drawing, so several on one bar stay readable.
- [Overlap](https://romanhaendler.github.io/umriss-ui/schedule/overlap/): Two subtasks claiming one lane at the same time (also called a double booking or conflict): both drawn, offset and marked, never packed into sub-lanes.
- [Dependencies](https://romanhaendler.github.io/umriss-ui/schedule/dependencies/): Lines from one subtask's end to the next one's start within a task, with the lag that must pass between them (also called links or predecessors). A lag that does not fit is marked, not repaired.
- [Routes](https://romanhaendler.github.io/umriss-ui/schedule/routes/): The shape of a dependency's line: a curve that leaves and arrives forwards, a straight line, or orthogonal segments. Set it for the schedule, or for one dependency.

## Time

The axis the work stands on: the calendar, blocked time, the now line, and moving through it.

- [Time axis and calendar](https://romanhaendler.github.io/umriss-ui/schedule/time-axis/): A day band that names the days and a time band whose ticks follow the zoom, from quarter hours to days. A working calendar cuts the hours nobody works out of the axis.
- [Blocked time](https://romanhaendler.github.io/umriss-ui/schedule/blocked-time/): Leave, maintenance and other time a lane is not available: hatched behind the work, a finding where work covers it, and closed to a drag.
- [Now line](https://romanhaendler.github.io/umriss-ui/schedule/now-line/): A line across the lanes at the present moment, so that whatever should have happened by now stands to its left. It follows the clock, or stays at a fixed instant for a replay.
- [Pan and zoom](https://romanhaendler.github.io/umriss-ui/schedule/pan-and-zoom/): Moving through a plan with the gestures of any scrolling surface: drag, wheel, Ctrl with the wheel, and a pinch. Only the view moves; the plan stays as it is.

## Reading

What a planner takes out of the picture: what is selected, what the pointer is on, and what a second view makes of it.

- [Selection](https://romanhaendler.github.io/umriss-ui/schedule/selection/): A click on a bar selects its whole task on every lane, so a planner sees every part of one job at once (also called highlighting). Reach for it when a list or a detail panel beside the plan should follow what was picked.
- [Interactions](https://romanhaendler.github.io/umriss-ui/schedule/interactions/): Reports what the pointer does on the plan - hover, click, right-click - with what it hit and the time and lane under it. Reach for it to open a menu, fill a detail panel or write a status line.
- [Tooltip](https://romanhaendler.github.io/umriss-ui/schedule/tooltip/): Names what the pointer rests on - a subtask with its times and findings, a dependency with its lag - without a click (also called a hover card). Replace its content when your application knows more than the schedule.
- [Linked schedules](https://romanhaendler.github.io/umriss-ui/schedule/linked-schedules/): Keeps two schedules on the same hours: pan or zoom one and the other follows (also called synchronised views). Reach for it when two sets of lanes stand apart on a screen but belong to the same time.
- [The handle](https://romanhaendler.github.io/umriss-ui/schedule/handle/): Converts between a point on the screen and a time on a lane, so marks of your own - a cut-off, a delivery window, a pin - stand at the right place beside the plan.

## Editing

Direct manipulation that changes nothing by itself: the schedule reports, the application decides.

- [Move and lane](https://romanhaendler.github.io/umriss-ui/schedule/move-and-lane/): Drag a bar to a new time or onto another lane (also called drag-and-drop rescheduling). A ghost shows where it would land and what that would cause; the drop reports the change for your application to apply.
- [Stretch, lead-in, lead-out](https://romanhaendler.github.io/umriss-ui/schedule/stretch/): Change how long work takes, or how long its preparation and its wrap-up take, by dragging an edge (also called resizing). Each part changes on its own and is reported for your application to apply.
- [Snapping](https://romanhaendler.github.io/umriss-ui/schedule/snapping/): Makes a drag land on a raster - the axis' own step, a fixed duration, or a pattern with an offset - so dropped work starts on a time a planner can read.
- [Placing from outside](https://romanhaendler.github.io/umriss-ui/schedule/placing/): Drag work that is not on the plan yet - from a backlog or a list of unassigned jobs - onto a lane, with the browser's own drag and drop. The drop reports where it should go; your application creates it.
- [Where a subtask may go](https://romanhaendler.github.io/umriss-ui/schedule/where-it-may-go/): Marks the lanes and times a piece of work may not go to as soon as a drag begins, and holds the ghost where it is allowed. Reach for it when rules of your domain - equipment, skills, leave - limit where work can stand.
- [Ripple](https://romanhaendler.github.io/umriss-ui/schedule/ripple/): Works out which later work has to move when one piece moves: every successor whose dependency no longer fits, pushed by exactly what is missing (also called a cascade). The schedule never runs it; your application decides.

## Findings

What a planner opens a schedule for, as data beside the picture.

- [Findings as data](https://romanhaendler.github.io/umriss-ui/schedule/findings/): Lists what is wrong with a plan - double bookings on a lane, dependencies that do not fit, work in blocked time - from the same data the schedule draws. Reach for it to list, count or filter the problems beside the picture.