Fix Report- Something when wrong when resize to fullscreen in bar or line view of expense report by borys3kk · Pull Request #87084 · Expensify/App

borys3kk · 2026-04-03T12:49:24Z

Explanation of Change

Fixed chart crashes caused by excessive re-renders. Moved activeDataIndex and isOverClickableTarget from React state to Reanimated SharedValues so hover/cursor changes no longer trigger React re-renders. Extracted ChartTooltipLayer to read shared values directly. Refactored useChartLabelLayout to return label widths only; truncation is now handled during render in ChartXAxisLabels. Added useChartLabelMeasurements, useChartParagraphs, and useYAxisLabelWidth hooks.

Fixed Issues

$ #87066

PROPOSAL:

Tests

Crash fix:

Go to reports tab
Select type:expense
Select group-by:merchant
Resize window in multiple times
Maximize the window
Ensure that no crash occurs

Verify that no errors appear in the JS console

Offline tests

QA Steps

Same as tests

// TODO: These must be filled out, or the issue title must include "[No QA]."

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

Screen.Recording.2026-04-03.at.16.06.23.mov

codecov · 2026-04-03T12:57:09Z

Codecov Report

❌ Looks like you've decreased code coverage for some files. Please write tests to increase, or at least maintain, the existing level of code coverage. See our documentation here for how to interpret this table.

Files with missing lines	Coverage Δ
...omponents/Charts/hooks/useChartInteractionState.ts	`100.00% <100.00%> (+28.57%)`	⬆️
src/components/Charts/hooks/useChartLabelLayout.ts	`100.00% <100.00%> (ø)`
...mponents/Charts/hooks/useChartLabelMeasurements.ts	`100.00% <100.00%> (ø)`
.../components/Charts/components/ChartYAxisLabels.tsx	`0.00% <0.00%> (ø)`
src/components/Charts/hooks/useLabelHitTesting.ts	`0.00% <0.00%> (ø)`
...components/Charts/components/ChartTooltipLayer.tsx	`0.00% <0.00%> (ø)`
src/components/Charts/hooks/useYAxisLabelWidth.ts	`0.00% <0.00%> (ø)`
src/components/Charts/hooks/useChartParagraphs.ts	`0.00% <0.00%> (ø)`
.../components/Charts/components/ChartXAxisLabels.tsx	`0.00% <0.00%> (ø)`
src/components/Charts/BarChart/BarChartContent.tsx	`5.00% <0.00%> (-0.36%)`	⬇️
... and 3 more
... and 297 files with indirect coverage changes

mhawryluk

Awesome! 🚀

melvin-bot · 2026-04-03T14:55:58Z

@DylanDylann Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 4c976df66b

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

joekaufmanexpensify

Fix is good for product

borys3kk · 2026-04-07T07:45:39Z

hi @DylanDylann, how's the review coming along?

DylanDylann · 2026-04-07T09:14:20Z

On my list today

DylanDylann · 2026-04-07T09:24:19Z

@codex review

chatgpt-codex-connector · 2026-04-07T09:47:50Z

Codex Review: Didn't find any major issues. Hooray!

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

DylanDylann · 2026-04-07T10:01:43Z

@borys3kk I think this bug only reproduces on Windows; unfortunately, I don’t have it. Could you ask someone to verify it there? Otherwise, we should ask the QA team to test this PR using an ad-hoc build.

borys3kk · 2026-04-07T10:13:32Z

@borys3kk I think this bug only reproduces on Windows; unfortunately, I don’t have it. Could you ask someone to verify it there? Otherwise, we should ask the QA team to test this PR using an ad-hoc build.

I was also able to reproduce this bug on macOS so I think you're good to go

DylanDylann · 2026-04-07T10:41:49Z

@borys3kk The code change looks fine to me

Could you update and add unit tests?

src/components/Charts/utils.ts	61.90% <0.00%> (-5.34%)	⬇️

borys3kk · 2026-04-07T10:46:00Z

@borys3kk The code change looks fine to me

Could you update and add unit tests?

src/components/Charts/utils.ts 61.90% <0.00%> (-5.34%) ⬇️

sure, on it

DylanDylann · 2026-04-17T08:13:30Z

Reviewing now....

DylanDylann · 2026-04-17T08:14:44Z

@codex review

chatgpt-codex-connector · 2026-04-17T08:45:37Z

Codex Review: Something went wrong. Try again later by commenting “@codex review”.

We were unable to download your code in a timely manner.

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

DylanDylann · 2026-04-17T08:46:44Z

Manual useMemo is redundant with React Compiler

DylanDylann · 2026-04-17T08:51:47Z

useChartLabelMeasurements is called twice, in both chart content components call useChartLabelMeasurements directly AND implicitly via useChartLabelLayout which calls it internally

DylanDylann · 2026-04-17T08:54:53Z

I discovered a new bug (also happens on the main branch). We can consider fixing in a new PR

I can't scroll down the chart in mWeb

Screen.Recording.2026-04-17.at.15.42.56.mov

DylanDylann · 2026-04-17T08:55:13Z

@MelvinBot Could you review this change?

MelvinBot · 2026-04-17T08:58:17Z

🤖 Code Review

The core approach is sound — moving activeDataIndex and isOverClickableTarget from React state to Reanimated SharedValues eliminates the React re-render cascade on every hover event, which fixes the crash. The ChartTooltipLayer isolation is a clean pattern. A few items to address:

1. useChartLabelMeasurements is called twice per chart (as DylanDylann noted)

Both BarChartContent and LineChartContent call useChartLabelMeasurements directly and useChartLabelLayout calls it internally. Same arguments (data, fontMgr, fontSize). React's hook rules mean these are independent hook instances, so the Skia text measurements run twice per render.

Options: (a) have useChartLabelLayout accept the measurements as a parameter instead of calling the hook internally, or (b) remove the direct call in the chart content components and derive labelWidths/ellipsisWidth from useChartLabelLayout's return value.

2. Explicit useMemo with React Compiler (as DylanDylann noted)

The App uses React Compiler, which auto-memoizes. The explicit useMemo calls in useChartLabelMeasurements, useChartParagraphs, useYAxisLabelWidth, ChartXAxisLabels, and ChartYAxisLabels are functionally redundant. They won't cause bugs, but removing them would align with the codebase convention and reduce noise.

3. builderCache WeakMap — verify reset() is safe across Skia versions

The ParagraphBuilder reuse via builderCache and reset() is a nice optimization. Just want to flag: reset() on SkParagraphBuilder clears internal state but the method availability can vary across @shopify/react-native-skia versions. Worth confirming it's available in the version pinned in package.json.

4. Minor: GLYPH_PADDING / 2 → GLYPH_PADDING change

In both BarChartContent and LineChartContent, the left padding calculation changed from yAxisLabelWidth + GLYPH_PADDING / 2 to yAxisLabelWidth + GLYPH_PADDING, and similarly in ChartYAxisLabels the x-position and width calculations changed. This doubles the effective glyph padding. Was this intentional to fix a visual alignment issue, or an oversight?

Overall this is a well-structured fix for the re-render problem. The SharedValue approach correctly keeps hover events on the UI thread, and the ChartTooltipLayer isolation ensures only the tooltip re-renders when the active index changes. Items 1 and 2 are the main actionable ones.

…ething-went-wrong-charts

borys3kk · 2026-04-20T10:24:49Z

@DylanDylann fixed both comments

borys3kk · 2026-04-20T10:36:13Z

I discovered a new bug (also happens on the main branch). We can consider fixing in a new PR

I can't scroll down the chart in mWeb

Screen.Recording.2026-04-17.at.15.42.56.mov

I can look at it but I also think that it should be fixed in a new PR

DylanDylann · 2026-04-21T07:22:45Z

@borys3kk Please fix the failed checks

DylanDylann · 2026-04-21T07:28:18Z

@codex review

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 774e9ca583

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

chatgpt-codex-connector · 2026-04-21T07:44:49Z

                <ChartXAxisLabels
-                    labels={truncatedLabels}
+                    labels={originalLabels}
+                    labelWidths={truncatedLabelWidths}


Pass original widths to X-axis label truncation

ChartXAxisLabels expects labelWidths to be the measured widths of the original labels, because it decides whether to truncate by checking labelWidth <= maxWidth before calling truncateLabel(). Passing truncatedLabelWidths here (already clamped in useChartLabelLayout) makes many overlong labels look like they already fit, so they render untruncated and can overflow/overlap, while hit-testing still uses the clamped geometry. The same wiring is present in LineChartContent as well.

Useful? React with 👍 / 👎.

borys3kk · 2026-04-21T11:24:08Z

@DylanDylann all yours

DylanDylann

LGTM

melvin-bot · 2026-04-21T11:29:34Z

We did not find an internal engineer to review this PR, trying to assign a random engineer to #87066 as well as to this PR... Please reach out for help on Slack if no one gets assigned!

puneetlath

Good job with this.

One piece of feedback: there's a lot going on in this PR and I found it difficult to keep it all in-context. I think I could've done a better review if it had been smaller. Would it have been possible to break this up into some smaller PRs instead of one big one?

github-actions · 2026-04-21T14:51:59Z

🚧 @puneetlath has triggered a test Expensify/App build. You can view the workflow run here.

github-actions · 2026-04-21T14:57:38Z

🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
Built from App PR #87084.

Android 🤖	iOS 🍎
https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-android-Adhoc-8a6f5bb-d4d623a-225321bc652995855c624b57e0a653e656da71cb/index.html	https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-ios-device-AdHoc-8a6f5bb-d4d623a-36e2a6651ad727adfd92a23eb49b2f847abdca5f/index.html

Web 🕸️
https://87084.pr-testing.expensify.com

👀 View the workflow run that generated this build 👀

OSBotify · 2026-04-21T15:00:56Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

OSBotify · 2026-04-23T20:17:46Z

🚀 Deployed to staging by https://github.com/puneetlath in version: 9.3.62-0 🚀

platform	result
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

Bundle Size Analysis (Sentry):

Android
iOS

fix line and bar charts many re-renders leading to a crash

5533b52

melvin-bot Bot assigned borys3kk Apr 3, 2026

borys3kk added 2 commits April 3, 2026 15:04

fix truncated y axis labels in edge cases

e564bf9

fix deprecated styles

58935ab

mhawryluk reviewed Apr 3, 2026

View reviewed changes

Comment thread src/components/Charts/components/ChartTooltipLayer.tsx Outdated

remove unnecessary display name

4c976df

mhawryluk approved these changes Apr 3, 2026

View reviewed changes

borys3kk marked this pull request as ready for review April 3, 2026 14:55

borys3kk requested review from a team as code owners April 3, 2026 14:55

melvin-bot Bot requested review from DylanDylann and removed request for a team April 3, 2026 14:55

melvin-bot Bot requested review from joekaufmanexpensify and removed request for a team April 3, 2026 14:55

borys3kk mentioned this pull request Apr 3, 2026

[$250] Report- Something when wrong when resize to fullscreen in bar or line view of expense report #87066

Open

7 tasks

chatgpt-codex-connector Bot reviewed Apr 3, 2026

View reviewed changes

Comment thread src/components/Charts/components/ChartTooltipLayer.tsx

anchor ChartTooltipLayer

ab2c6dc

joekaufmanexpensify previously approved these changes Apr 3, 2026

View reviewed changes

improve test coverage

5ef0796

borys3kk dismissed joekaufmanexpensify’s stale review via 5ef0796 April 7, 2026 10:55

borys3kk added 4 commits April 17, 2026 15:21

Merge branch 'main' of github.com:Expensify/App into borys3kk-fix-som…

93f66bb

…ething-went-wrong-charts

remove useMemo and redundant hook call

9ddbbc8

remove unnecessary manual memoization

20f4911

remove remaining manual memoization

774e9ca

chatgpt-codex-connector Bot reviewed Apr 21, 2026

View reviewed changes

borys3kk added 2 commits April 21, 2026 12:43

fix tests

293fe58

fix prettier

d5be93d

DylanDylann approved these changes Apr 21, 2026

View reviewed changes

melvin-bot Bot requested a review from puneetlath April 21, 2026 11:29

puneetlath approved these changes Apr 21, 2026

View reviewed changes

puneetlath merged commit 8a6f5bb into Expensify:main Apr 21, 2026
35 checks passed

OSBotify mentioned this pull request Apr 23, 2026

Deploy Checklist: New Expensify 2026-04-23 #88633

Open

Conversation

borys3kk commented Apr 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Explanation of Change

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

codecov Bot commented Apr 3, 2026 • edited by github-actions Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

mhawryluk left a comment

Choose a reason for hiding this comment

Uh oh!

melvin-bot Bot commented Apr 3, 2026

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

joekaufmanexpensify left a comment

Choose a reason for hiding this comment

Uh oh!

borys3kk commented Apr 7, 2026

Uh oh!

DylanDylann commented Apr 7, 2026

Uh oh!

DylanDylann commented Apr 7, 2026

Uh oh!

chatgpt-codex-connector Bot commented Apr 7, 2026

Uh oh!

DylanDylann commented Apr 7, 2026

Uh oh!

borys3kk commented Apr 7, 2026

Uh oh!

DylanDylann commented Apr 7, 2026

Uh oh!

borys3kk commented Apr 7, 2026

Uh oh!

DylanDylann commented Apr 17, 2026

Uh oh!

DylanDylann commented Apr 17, 2026

Uh oh!

chatgpt-codex-connector Bot commented Apr 17, 2026

Uh oh!

DylanDylann commented Apr 17, 2026

Uh oh!

DylanDylann commented Apr 17, 2026

Uh oh!

DylanDylann commented Apr 17, 2026

Uh oh!

DylanDylann commented Apr 17, 2026

Uh oh!

MelvinBot commented Apr 17, 2026

Uh oh!

borys3kk commented Apr 20, 2026

Uh oh!

borys3kk commented Apr 20, 2026

Uh oh!

DylanDylann commented Apr 21, 2026

Uh oh!

DylanDylann commented Apr 21, 2026

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector Bot Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

borys3kk commented Apr 21, 2026

Uh oh!

DylanDylann left a comment

Choose a reason for hiding this comment

borys3kk commented Apr 3, 2026 •

edited

Loading

codecov Bot commented Apr 3, 2026 •

edited by github-actions Bot

Loading