[Due for payment 2025-02-26] [$250] Distance - Distance label is not positioned within the map view

[mitarachim]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.95-0
Reproducible in staging?: Yes
Reproducible in production?: Unable to check
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: Exp
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team
Device used: Mac 15.0 / Chrome
App Component: Money Requests

Action Performed:

1. Go to staging.new.expensify.com
2. Open FAB > Create expense > Distance.
3. Enter the following waypoints:

Start - 88 Kearny Street
First Stop - Golden Gate Bridge
Second stop - Telegraph Hill

Expected Result:

The distance label will be positioned within the map view.

Actual Result:

The distance label is not positioned within the map view.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6736043_1738920872146.20250207_173156.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021890346455667275066
• Upwork Job ID: 1890346455667275066
• Last Price Increase: 2025-02-14
• Automatic offers:
• suneox | Contributor | 106124815

Issue Owner

Current Issue Owner: @abekkala

[melvin-bot]

Triggered auto assignment to @abekkala (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[melvin-bot]

Triggered auto assignment to @mjasikowski (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[mjasikowski]

Not a blocker - minor UI issue. Caused by #55517

@truph01 @shubham1206agra can you look into that please?

[truph01]

I’m currently investigating the issue. The problem arises because determining the correct position for the distance label is challenging. I’ll look into improving this.

[truph01]

This issue is already known, as we mentioned during the implementation of PR #55517. In that PR, we encountered the issue and here’s our perspective on it:

I almost pointed this out, but since the path changes based on stops and zoom level, it seems like something we’ll never be able to get 100% perfect.

[mjasikowski]

Thanks @truph01. @Expensify/design is it OK if we consider this a mild UX inconvenience that is very difficult to fix and just learn to live with it?

[dannymcclain]

It would be nice for it to at least show up inside the view... But I'm not sure how strongly I feel. Let's see what @dubielzyk-expensify thinks.

[shawnborton]

Yeah agree, I think ideally we should display it within the overall map view if we can.

[dubielzyk-expensify]

Yeah this feels worth solving. No point having the label if we can't guarantee it showing up

[mjasikowski]

Thanks all! @truph01 try to improve the label positioning as much as you can. Let's aim to display it reliably.

[truph01]

It would be nice for it to at least show up inside the view

I'm currently looking into the issue, but the visibility of the distance label depends on the zoom level. As shown in the video below, the visibility changes according to the zoom value:

Screen.Recording.2025-02-12.at.17.57.26.mov

Ensuring the distance label stays visible at all zoom levels is difficult. In my opinion, the only solution is to anchor the distance label to a fixed position on the map, such as the bottom left corner. @dannymcclain

[dannymcclain]

I don't think it needs to stay visible at ALL zoom levels—it just needs to be visible on the initial zoom level. So basically, when you first land on the map you should be able to see it in the view, and after that, if you go messing with the map/zoom level, that's on you. cc @Expensify/design for a gut check on that.

[shawnborton]

Yeah, that's my thinking too. Is there a way to just try to center it up within the map view? In the latest example it seems like it's anchored to the middle stop, instead of just trying to be vertically and horizontally centered to the map line/view.

[dubielzyk-expensify]

Agree with both the designers here. I think if you want a good reference, then open Google Maps and look up directions from A -> B and use set it to Driving. They might have more complicated calculations that we might not want or Mapbox might not provide, so like the above said it mostly just needs to look deliberate for the first zoom level

[muimsd]

I hope you're doing well. I recently submitted a proposal for your job on Upwork and wanted to check if it has been reviewed.

I am available and ready to assist in resolving this issue efficiently. Please let me know if you need any further details from my end. Looking forward to your response!

Best regards,
Muhammad Imran Siddique

[melvin-bot]

📣 @muimsd! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[muimsd]

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: (https://www.upwork.com/freelancers/muimsd)

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[suneox]

@muimsd Welcome to Expensify! First, please take some time to read through the guidelines on how to contribute to this project. This will help you understand the process and expectations for contributing effectively.

[muimsd]

@suneox Thank you for the reply. I will look further into the guidelines. meanwhile if you have any questions for me let me know?

[dubielzyk-expensify]

Sorry for the late reply but given we changed the background to better differentiate between the polyline and the distance marker I think what is being suggested here works well 👍

[muimsd]

A label can be placed at the corner of a polyline if the road remains parallel after a turn.
Another approach is to calculate the bounding box of the polyline and determine its center.
The center point is then snapped to the nearest position on the polyline.
This ensures that the label is always positioned at the center of the bounding box.

Thank you!

[muimsd]

@suneox I have read the guidelines.

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.1.0-2 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix Distance label position on map #56899

If no regressions arise, payment will be issued on 2025-02-26. 🎊

For reference, here are some details about the assignees on this issue:

• @suneox requires payment automatic offer (Contributor)
• @parasharrajat requires payment through NewDot Manual Requests

[melvin-bot]

@suneox / @parasharrajat @abekkala @suneox / @parasharrajat The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[abekkala]

PAYMENT SUMMARY FOR FEB 26

• Fix: @parasharrajat [$250, if no regressions] payment via NewDot
• PR Review: @suneox [$250, if no regressions] OFFER
  please complete checklist

[abekkala]

@suneox, please complete the checklist above so that payment can be issued tomorrow. Thanks!

[suneox]

BugZero Checklist:

• [Contributor] Classify the bug:

Bug classification

Source of bug:

• 1a. Result of the original design (eg. a case wasn't considered)
• 1b. Mistake during implementation
• 1c. Backend bug
• 1z. Other:

Where bug was reported:

• 2a. Reported on production (eg. bug slipped through the normal regression and PR testing process on staging)
• 2b. Reported on staging (eg. found during regression or PR testing)
• 2d. Reported on a PR
• 2z. Other:

Who reported the bug:

• 3a. Expensify user
• 3b. Expensify employee
• 3c. Contributor
• 3d. QA
• 3z. Other:

• [Contributor] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.

  Link to comment: https://github.com/Expensify/App/pull/55517/files#r1970075769

• [Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.

  Link to discussion: N/A

• [Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

  N/A: Due to it isn't an impactful bug

[abekkala]

PAYMENT SUMMARY FOR FEB 26

• Fix: @parasharrajat [$250] payment via NewDot
• PR Review: @suneox [$250] payment sent and contract ended - thank you! 🎉

[parasharrajat]

Payment requested as per #56531 (comment)