Hi everyone,
A request we hear often is horizontal navigation support in the WebUI Gantt Chart. Many apps open the Gantt on a fixed window (say, one year) while the model holds much more data (two, three, five years). Right now users can't move beyond that window without the app changing the viewport for them. The WinUI Gantt offered ◀ ▶ buttons for this. WebUI has nothing equivalent yet.
We're designing a Horizontal navigator for the Gantt Chart (v2) and would like your feedback before we build it. Below is what we have in mind and a few questions at the end. Answers to any of them help, even one or two.
Two concepts: timeline and viewport
- Timeline is the full time range the Gantt can show, from the earliest job start to the latest job end.
- Viewport is the part of the timeline currently visible. You set it with
viewportStartand/orviewportEnd.
Timeline (from the job data)
Jan 2020 ───────────────────────────────────────────── Dec 2030
┌──────────────┐
│ Viewport │
│ Jan–Dec 2025 │
└──────────────┘If only viewportStart is set, the chart shows from that date to the last job. If only viewportEnd is set, it shows from the first job to that date.
The Horizontal navigator
A thin bar directly under the chart. It gives an overview of the whole timeline, and a handle marks where the viewport is.
Jan 2020 │───────[████████████]──────────────────────│ Dec 2030
Current viewport- Bar start and end: the first and last point of the timeline
- Handle position: where you are in the timeline
- Handle width: how much of the timeline is visible
The Gantt's existing time bar still shows the details of the visible period. The navigator adds the big picture: where am I, and how much more is there?
What users can do with it (mouse)
Move: drag the handle left or right. The viewport keeps its length and shifts in time.
Jan 2025 – Dec 2025 → drag right → Apr 2025 – Mar 2026Resize: drag either edge of the handle to show a longer or shorter period (zoom out or in). The smallest period is one unit of the Gantt's time resolution.
Click the empty bar: the handle jumps toward the click and keeps its length. Clicking to the right moves the handle's end to that point, and clicking to the left moves its start there.
Tooltip: hovering, dragging or resizing shows the exact range, for example Apr 2026 – Mar 2027, so users don't have to guess dates from the handle's position.
While dragging, only the handle and tooltip move. The chart redraws once, when you let go. The handle stops at the ends of the timeline.
Two-way link with the model
When the user lets go of the handle, the new start and end are written back to viewportStart / viewportEnd:
AIMMS identifiers ──► Gantt viewport ──► user moves handle ──► AIMMS identifiers- Bound to identifiers: the identifiers are updated, so the model knows what the user is looking at and can react (for example, load more data or sync other widgets). The model can also set the viewport at any time, e.g. a "Reset view" or "Zoom to fit" button, and the navigator follows.
- Literal values: these are updated the same way, like the zoom and center options of the Map and Diagram widgets.
- To start from a default window (say, one year from today) every time a page opens, reset the identifiers in the page's on-open procedure.
One option: Show | Read-only | Hidden
| Mode | Navigator | User can |
|---|---|---|
| Hidden (default) | Not shown | Nothing. The app controls the viewport, exactly as today. |
| Read-only | Shown | See where the viewport sits in the timeline, but not change it |
| Move-only | Shown | Move the viewport, but not change its length (the app decides the duration) |
| Show | Shown | Move and resize the viewport |
Setting a viewport doesn't mean users must be able to change it. Those are two separate choices. The navigator can also be shown when no viewport is set: the handle then covers the whole bar, and users can shrink it to zoom in.
Because the default is Hidden, existing apps won't change until you turn the navigator on.
Not included in this first version
- Dragging or scrolling (wheel/trackpad) on the chart area itself. The navigator is the only way to navigate horizontally.
- Keyboard and touch control of the navigator (mouse only for now)
- A mini-preview of jobs inside the navigator bar
- Preset range buttons such as 1 month / 1 year / Today / Fit all
Your feedback
Whether you build apps with the Gantt, use them day to day, or are just curious, we'd like to hear from you. Please share your thoughts on any of the questions below:
- Does the split between timeline (all data) and viewport (visible part) match how you expect a Gantt to behave?
- When a viewport is set, should users be able to navigate the whole timeline with the navigator?
- Do Show / Move-only / Read-only / Hidden cover your use cases? Is anything missing?
- Should moving the handle update the
viewportStart/viewportEndvalues (identifiers or literals)? Would that cause problems in your apps, e.g. procedures that run when those identifiers change? - Is resizing the handle a useful way to change the visible period, or would you rather have separate zoom controls?
- Are the navigator's start and end points useful context for the overall timeline?
- Is the tooltip with exact start/end during hover, drag and resize enough feedback?
- Is mouse-only acceptable for a first version, or do your users need keyboard or touch?
- If you used the WinUI Gantt: does the navigator cover what the ◀ ▶ buttons did for you?
- Any other cases where the viewport or navigator should behave differently?
Thanks,
Madhu Krishnappa
AIMMS WebUI Product Owner