enhancement
major
minor
defect
critical
major
minor
minor
#30185
Flowchart (Gantt): LineDeco labels (e.g., “Today”) are cut off beneath fixed headers; edges without arrowheads
Two display issues with the Gantt chart in the flow diagram (tl-react-flow-*, 8.0.0-alpha12). The second issue comes from #30186.
1. Labeling of line decorations under fixed headers
Problem
A vertical line decoration (reactFlowGanttLineDeco(..., label: ...)) is drawn visibly when `frozenRows > 0 `. However, the engine places its label below the fixed headers, where it is truncated or obscured.
Reproduction
- Gantt with ` frozenRows`: 2 (month/week) and `reactFlowGanttLineDeco(model: "today", at: <today>, color: "#FFC800", label: "Today: 11/06/2026")`.
- The line is visible, but the label is not visible or is only partially visible.
Expected
The label is fully visible in the fixed header area, e.g., as a marker on the timeline, or directly below the fixed rows.
2. Edges without arrowheads (#30186)
Problem
Edges (reactFlowGanttEdge) are drawn as lines without arrowheads. For dependencies (predecessor → successor) and schedule shifts (plan → forecast), the direction is functionally important. Currently, it can only be identified by the position of the line.
Expected
An option on the edge, e.g., ` targetArrow: true ` or ` arrowHead: "end"`. The arrowhead adopts the stroke color, including ` violatedStrokeColor`.
Solution
Label: The label of a decoration that applies to all rows or begins on a fixed row appears directly below the fixed rows. It is drawn on a separate layer above the header and data areas, which scrolls horizontally only; during vertical scrolling, it remains visible and follows its line during horizontal scrolling. The label of a decoration that applies only to data rows remains on its first row as before and scrolls with the data. Without fixed header rows, the position remains unchanged.
Arrowheads: `reactFlowGanttEdge` accepts the parameters `sourceSymbol ` and `targetSymbol `—the same names and values as `reactFlowGraphEdge ` (`none`, `arrow`, `closedArrow`, `filledArrow`, `diamond`, `filledDiamond`), with the default being `none`. The symbol points toward the respective element and is drawn in the currently active stroke color and thickness; if a dependency is violated, it is drawn in violatedStrokeColor; even if the edge is dashed, the symbol is solid. The horizontal end of the edge is extended by the symbol’s length so that the line does not protrude into the tip and does not bend back, even with thick edges.
Filled symbols (filledArrow, filledDiamond) are now filled with the stroke color, even along the edges of reactFlowGraphEdge; previously, they were filled black regardless of the stroke color.
Example:
reactFlowGanttEdge(model: $dep, sourceModel: $a, sourceEndpoint: "END", targetModel: $b, targetEndpoint: "START", targetSymbol: "filledArrow")
The Gantt demos in the React demo application show both (Demos → Gantt Demo, Gantt Schedule).