enhancement
major
minor
defect
critical
major
minor
minor
#30181
Flowchart (Gantt): The chart is always displayed in full—no vertical scrolling, but it becomes unreadable when there are many rows
Problem
The Flow Engine’s Gantt chart is always scaled to fit entirely within the visible area. With 7 rows, this results in approximately 72%; with 200 rows, approximately 17%.
There is no way to display the rows at their natural height and scroll vertically while keeping the fixed headers in place. Ctrl+mouse wheel only zooms the timeline (horizontally), not the overall size.
Version: 8.0.0-alpha12, modules tl-react-flow-*.
Reproduction
- Gantt chart with 200 rows, e.g., generated synthetically, and ` frozenRows`: 1.
- Display in the panel: The text is no longer legible at approximately 17% zoom. There is no scroll bar.
Performance
No issues: 200 rows, 600 milestones, 200 edges, approximately 3,100 SVG nodes. Rendering takes about 200 ms; a single zoom step takes about 55 ms.
Expected Behavior (Suggestion)
An option for the Gantt layout or chart, e.g., fit="width" or fit="none":
- Vertical: natural row height, scrolling within the panel
- horizontal: width adjusted or zoomable via Ctrl+mouse wheel
- The frozen rows (frozenRows) remain at the top during vertical scrolling.
- Desirable: Fixed row labels aligned to the left during horizontal scrolling
Impact
In practice, a project schedule has 50 to 300 rows. Without scrolling, only a small portion can be displayed meaningfully. As a workaround, depth and subtree filters limit the number of rows.
Additional Findings
After dragging in the diagram, the diagram’s SVG collapses to a height of about 154 px, and the height of the viewBox becomes negative. The height of the SVG changes with every redraw. Cause: The diagram element had `height: 100%`, which becomes ` auto ` in a panel without a `fill`; the SVG’s height was then determined by the aspect ratio of its viewBox. A redraw would write back an outdated viewBox, and the ResizeObserver would apply the height change, scaled to the viewBox, until its height became negative and the browser reverted to the default size.
Solution
No fit option on the diagram: A flowchart is scaled as a whole (fitted or 100%), whereas a Gantt chart has its own viewport in which it scrolls and zooms the timeline.
- Available space for the layout: ` DiagramOperations.layout(context, availableWidth, availableHeight) ` provides the chart with the size of its viewport (in the browser, this is the size of the panel at scale 1, which has always been infinite until now). The containers pass on the remaining space; thus, a header above the Gantt chart takes its share, and the Gantt chart gets the rest. When the panel’s size changes, the layout is redone. An export (reactFlowToSvg) continues to receive unlimited space and displays the complete Gantt chart.
- Diagram size: A diagram always fills the space of its container (like a table); its height is never determined by its drawing. This resolves the issue of the SVG breaking after a drag. A panel containing a diagram will therefore fill the container, unless it has `fill="false" `.
- Gantt chart: If its content is larger than the available space, it is limited to that space and scrolls internally: rows retain their natural height, fixed headers remain at the top, and row labels remain aligned to the left. Scrolling is possible using the mouse wheel and dragging on the free area. This works regardless of `frozenRows` (when `frozenRows` is 0, there is no fixed header row). Without `initialZoom`, the timeline is scaled to fit the available width until the user zooms using Ctrl+mouse wheel; Ctrl+mouse wheel over a Gantt chart always zooms its timeline.
- Scroll bars: The Gantt chart draws its own scroll bars for the directions in which it scrolls. The slider can be dragged; clicking on the bar scrolls by one visible page. The scroll bars occupy their own space so that the last row and the end of the timeline remain fully visible.
- The ` fixedView `option on ` reactFlowChart`: disables panning and zooming of the entire chart; the chart is displayed unscaled at its origin. Boxes with their own viewport, such as the Gantt chart, continue to scroll and zoom internally. Intended for a chart that displays only a Gantt chart (possibly with a header).
- Demo in tl-demo-react: “Gantt Schedule” with 200 rows and a header (fixedView: true).
- Documentation: “Size and view” section in the article view-layer/flow-diagrams.