Repository navigation
feat(ui): a calendar of the history under the rows - #58
Merged
Merged
Conversation
Implements ADR 0050.
With the list of commits open beside a narrow chart, the legend and the timeframe ran past the chart's width, and the timeframe's buttons showed on top of the list. The head now ends at the chart's right margin and wraps.
The tip sat at the chart's top right, where the legend and the timeframe now wrap onto a second line when the chart is narrow. It now sits beside the cursor's line at the pointer's height, turned toward the room the chart has.
Wrapping the head between the legend and the timeframe was not enough: on Linux's fonts the timeframe's buttons alone ran 4 pixels past a chart 900 pixels wide. They now wrap among themselves too, checked at 820.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why
The rows read the history one commit at a time and the chart of lines over time reads it as sums, but neither shows at a glance which days the work happened on, how heavy each day was, or whether it added or removed code, and neither leads to a day's commits. A calendar strip under the rows does both. The decisions are in ADR 0050.
The calendar
A "Calendar" button in the pane's header shows the strip under whatever the pane's body shows, so the rows stay in view. Each column is a Monday-first week by the local calendar (
calendarWeeks). A day is filled more strongly the more lines its commits changed, on the thickness's logarithmic scale, and runs from green when they added to red when they deleted (dayShade). Buttons above the weeks switch to the lines added alone or deleted alone. Every loaded commit counts except merges, whose lines against the first parent repeat the merged commits', stash entries and the uncommitted row (counts).Clicking a day selects its newest commit in the rows and closes the chart if it is open; clicking it again walks to each older commit of the day and back round to the newest (
nextInDay). The selected commit's day is outlined.Reaching back
The calendar counts the loaded commits, and the rows load a page at a time. Scrolling the calendar to its oldest end, or pressing "Older" there, reads the next page, and the weeks already in view stay where they were. A page is asked for at most every half second, and one asked for sooner waits instead of being dropped, so resting at the oldest end keeps reading (Calendar.tsx).
The calendar lays out at most 530 weeks, about ten years back from its newest day (
MAX_WEEKS). A commit's date is whatever its author wrote, and without the limit one dated centuries away stretched the calendar into hundreds of thousands of cells and froze the page.Chart fixes
Two layout faults of the chart of lines over time show once a list or the calendar narrows it, and their fixes have commits of their own. The legend and the timeframe ran past the chart's right edge, and the timeframe's buttons drew on top of the list of commits beside it; the head now ends at the chart's margin and wraps, and the timeframe's buttons wrap among themselves when even a line of their own is too narrow (styles.css). The tip sat at the top right, over the wrapped legend; it now sits beside the cursor's line at the pointer's height, turned toward the room the chart has (
tipPlace).Tests