feat: create branch picker element - #608
Conversation
- conditionally set colors for branches based on current state - refactor button rendering to reduce duplication
- include helper to determine branch for train pill - pass down branch picker selection setter prop - update tests to accommodate new prop
These items were not showing up properly after merging in main.
On mobile (specifically Safari on iOS) the address bar (which is now on the bottom of the screen) blocks the address picker. This resolves this issue. Of note, I setting `h-screen h-dvh` as Tailwind variables, but they seemed to conflict and it did not work.
| .app-wrapper { | ||
| height: 100vh; | ||
| height: 100dvh; | ||
| } |
There was a problem hiding this comment.
Highlighting my commit description: a9e3b0e
If there's a better approach here I'm open to it, but this seemed like the most direct way to ensure the branch picker was not blocked by mobile address bars.
| // update branch picker to reflect the branch the clicked train is on | ||
| const matchingStationList = stationLists.find((stations) => | ||
| stations.some((station) => | ||
| station.stop_ids.some( | ||
| (stopId) => stopId === match.vehiclePosition.stopId, | ||
| ), | ||
| ), | ||
| ); | ||
| if (matchingStationList) { | ||
| setBranchPickerSelection(branchForLadder(matchingStationList)); | ||
| } | ||
|
|
There was a problem hiding this comment.
question: I'm torn on this. spiritually it feels like we shouldn't have to search back through the stations to figure out what branch a train is on. is there a better way?
There was a problem hiding this comment.
Tried a different approach in 3b06ead.
This change sets the branch for each ladder on render, so we can avoid the lookup on each click.
(avoiding station lookup on each click)
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
|
Note: experimented with using Copilot to resolve a merge conflict, which appeared to retain both my changes and the latest commits from main |
mathcolo
left a comment
mathcolo
left a comment
There was a problem hiding this comment.
I'm close to approving! just a few more spots
This makes the data type route-agnostic. It changes the `branchColors` type definition to match the ROUTE_DEFAULTS from ladder, as the partial was causing issues. Update branch button map to temporarily hard-code "Red" as route
6f3d53c to
b117bcc
Compare
| setIsOverflowing(el.scrollWidth > el.clientWidth); | ||
| }; | ||
| check(); | ||
| window.addEventListener("resize", check); |
There was a problem hiding this comment.
question: does this need to be debounced?
| return ladderConfig[ | ||
| // First ladder is Alewife, for other branches use name of last station | ||
| Stations[routeId].indexOf(ladderConfig) === 0 ? 0 : ladderConfig.length - 1 | ||
| ].name; |
There was a problem hiding this comment.
question: This is slightly awkward, because Orbit already knows which ladder a station is on—it needed that info to build the ladder in the first place.
can we flip this around and instead set up ladder.tsx:212 to get a BranchPickerSelection that you build at setup time which information you already have?
There was a problem hiding this comment.
Discussed over a handle, but the idea was to use an index-based value (using the stations array) instead of a string to avoid needing to lookup the branch by station name. Implemented in 0b91e85.
Storing the branch as a string required performing a reverse-lookup to determine which branch a particular station was part of (since a branch) name is not part of the underlying data structure. This instead uses the index of the defined branch, which we can rely on to be in a consistent order. This updates related tests to follow this new structure.
f2fbd81 to
9528ee0
Compare
2 participants
Asana Task: 🪐 Create Orbit branch picker element
This adds a "branch picker" component to allow focusing of different branches. Right now, this stores the chosen branch in state, and adjusts the active/inactive display of the three branch buttons accordingly. Clicking a train pill will also update the branch selection to the branch containing that train. Light mode versions of colors are used where available.
Related work:
Note: focusing ladders on selection change and other scrolling behavior will be included in subsequent tasks
Alewife
Ashmont
Braintree
Checklist