migration: update the useCustomReactflow to useReactflow

[khiroshi-win]

Issue

https://github.com/route06/liam-internal/issues/4316

• resolve:

Why is this change needed?

2025/03/27に12.5.0がリリースされました。
ref. https://reactflow.dev/whats-new/2025-03-27

fitViewの実装が改善されて、意図した挙動にするためにハックしていたコードが不要になるとのことでした。

liam内では、fitViewのカスタムのために独自の useCustomReactflowを作成していたので、リリースノートの通り不要になりそうであれば、独自の実装を剥がしてしまいたいです。

What would you like reviewers to focus on?

Testing Verification

I tested it on Chrome and Safari and it worked fine on both sites.

What was done

pr_agent:summary

Detailed Changes

pr_agent:walkthrough

Additional Notes

[changeset-bot]

⚠️ No Changeset found

Latest commit: 1c59d0f

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
liam-app	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 20, 2025 8:24am
liam-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 20, 2025 8:24am

2 Skipped Deployments

Name	Status	Preview	Comments	Updated (UTC)
liam-docs	⬜️ Ignored (Inspect)	Visit Preview		Jun 20, 2025 8:24am
liam-erd-sample	⬜️ Skipped (Inspect)		💬 Add feedback	Jun 20, 2025 8:24am

[supabase]

Updates to Preview Branch (update/react-flow-version) ↗︎

Deployments	Status	Updated
Database	✅	Fri, 20 Jun 2025 08:18:22 UTC
Services	✅	Fri, 20 Jun 2025 08:18:22 UTC
APIs	✅	Fri, 20 Jun 2025 08:18:22 UTC

Tasks are run on every commit but only new migration files are pushed.
Close and reopen this PR if you want to apply changes from existing seed or migration files.

Tasks	Status	Updated
Configurations	✅	Fri, 20 Jun 2025 08:18:22 UTC
Migrations	✅	Fri, 20 Jun 2025 08:18:22 UTC
Seeding	✅	Fri, 20 Jun 2025 08:18:22 UTC
Edge Functions	✅	Fri, 20 Jun 2025 08:18:22 UTC

---

View logs for this Workflow Run ↗︎.
Learn more about Supabase for Git ↗︎.

[qodo-merge-for-open-source]

CI Feedback 🧐

(Feedback updated until commit 1c59d0f)

A test triggered by this PR failed. Here is an AI-generated analysis of the failure:

Action: _e2e-tests (Mobile Safari)

Failed stage: Run e2e tests [❌]

Failed test name: top

Failure summary: The action failed due to multiple Playwright test failures in the Mobile Safari browser: • Visual regression test (VRT) failed: Screenshot comparison for 'top' test timed out after 5000ms and showed 2335 pixel differences (0.01 ratio) in file tests/vrt/vrt.test.ts:21:22 • Two E2E tests failed due to timeouts: - "Edge animation should be triggered when table node is clicked" - element not found at tests/e2e/page.test.ts:53:34 - "Cardinality should be highlighted when table node is clicked" - test timeout exceeded All tests failed after multiple retries, indicating consistent issues with the Mobile Safari browser environment or application behavior.

Relevant error logs: 1: ##[group]Runner Image Provisioner 2: Hosted Compute Agent ... 219: Progress: resolved 2082, reused 0, downloaded 567, added 550 220: Progress: resolved 2082, reused 0, downloaded 586, added 558 221: Progress: resolved 2082, reused 0, downloaded 694, added 680 222: Progress: resolved 2082, reused 0, downloaded 842, added 811 223: Progress: resolved 2082, reused 0, downloaded 933, added 899 224: Progress: resolved 2082, reused 0, downloaded 1154, added 1168 225: Progress: resolved 2082, reused 0, downloaded 1283, added 1250 226: Packages are hard linked from the content-addressable store to the virtual store. 227: Content-addressable store is at: /home/runner/setup-pnpm/node_modules/.bin/store/v10 228: Virtual store is at: node_modules/.pnpm 229: Progress: resolved 2082, reused 0, downloaded 1407, added 1395 230: Progress: resolved 2082, reused 0, downloaded 1646, added 1664 231: Progress: resolved 2082, reused 0, downloaded 1833, added 1845 232: Progress: resolved 2082, reused 0, downloaded 1960, added 1963 233: Progress: resolved 2082, reused 0, downloaded 2062, added 2082, done 234: WARN  Failed to create bin at /home/runner/work/liam/liam/node_modules/.pnpm/node_modules/.bin/supabase. ENOENT: no such file or directory, open '/home/runner/work/liam/liam/node_modules/.pnpm/node_modules/supabase/bin/supabase' 235: WARN  Failed to create bin at /home/runner/work/liam/liam/node_modules/.pnpm/[email protected]/node_modules/supabase/node_modules/.bin/supabase. ENOENT: no such file or directory, open '/home/runner/work/liam/liam/node_modules/.pnpm/[email protected]/node_modules/supabase/bin/supabase' 236: .../node_modules/supabase postinstall$ node scripts/postinstall.js 237: .../node_modules/supabase postinstall: Downloading https://github.com/supabase/cli/releases/download/v2.24.3/supabase_2.24.3_checksums.txt 238: .../node_modules/supabase postinstall: Downloading https://github.com/supabase/cli/releases/download/v2.24.3/supabase_linux_amd64.tar.gz 239: .../node_modules/supabase postinstall: Checksum verified. 240: .../node_modules/supabase postinstall: Installed Supabase CLI successfully 241: .../node_modules/supabase postinstall: Done 242: WARN  Failed to create bin at /home/runner/work/liam/liam/frontend/apps/erd-sample/node_modules/.bin/liam. ENOENT: no such file or directory, open '/home/runner/work/liam/liam/frontend/packages/cli/dist-cli/bin/cli.js' 243: devDependencies: ... 254: + vercel 41.7.8 255: ╭ Warning ─────────────────────────────────────────────────────────────────────╮ 256: │ │ 257: │ Ignored build scripts: @bundled-es-modules/glob, @depot/cli, │ 258: │ @prisma/engines, @sentry/cli, @tailwindcss/oxide, core-js-pure, esbuild, │ 259: │ protobufjs, sharp, style-dictionary. │ 260: │ Run "pnpm approve-builds" to pick which dependencies should be allowed │ 261: │ to run scripts. │ 262: │ │ 263: ╰──────────────────────────────────────────────────────────────────────────────╯ 264: frontend/apps/docs postinstall$ fumadocs-mdx 265: frontend/apps/docs postinstall: [MDX] types generated 266: frontend/apps/docs postinstall: Done 267: frontend/internal-packages/jobs postinstall$ cp ../../packages/db-structure/node_modules/@ruby/prism/src/prism.wasm prism.wasm 268: frontend/internal-packages/jobs postinstall: Done 269: WARN  Failed to create bin at /home/runner/work/liam/liam/frontend/apps/erd-sample/node_modules/.bin/liam. ENOENT: no such file or directory, open '/home/runner/work/liam/liam/frontend/apps/erd-sample/node_modules/@liam-hq/cli/dist-cli/bin/cli.js' 270: frontend/apps/app postinstall$ cp ../../packages/db-structure/node_modules/@ruby/prism/src/prism.wasm prism.wasm ... 274: with: 275: path: ~/.cache/ms-playwright 276: key: playwright-Linux-5a4959860dfda9c61bbb78d2e0e4a82641275ee7bbf2474053bad0f010649422 277: restore-keys: playwright-Linux- 278: 279: enableCrossOsArchive: false 280: fail-on-cache-miss: false 281: lookup-only: false 282: save-always: false 283: env: 284: CI: true 285: URL: https://liam-fg1etrupp-liambx.vercel.app 286: ENVIRONMENT: Preview – liam-app 287: PNPM_HOME: /home/runner/setup-pnpm/node_modules/.bin 288: ##[endgroup] 289: [warning]Event Validation Error: The event type deployment_status is not supported because it's not tied to a branch or tag ref. 290: ##[group]Run pnpm exec playwright install --with-deps ... 1551: |■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ | 90% of 2.3 MiB 1552: |■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■| 100% of 2.3 MiB 1553: FFMPEG playwright build v1011 downloaded to /home/runner/.cache/ms-playwright/ffmpeg-1011 1554: ##[group]Run pnpm exec playwright test --project="Mobile Safari" 1555: �[36;1mpnpm exec playwright test --project="Mobile Safari"�[0m 1556: shell: /usr/bin/bash -e {0} 1557: env: 1558: CI: true 1559: URL: https://liam-fg1etrupp-liambx.vercel.app 1560: ENVIRONMENT: Preview – liam-app 1561: PNPM_HOME: /home/runner/setup-pnpm/node_modules/.bin 1562: ##[endgroup] 1563: Running 17 tests using 1 worker 1564: °°°·°·××±×±···°°°°°×××××F 1565: 1) [Mobile Safari] › tests/vrt/vrt.test.ts:34:5 › top ──────────────────────────────────────────── 1566: Error: �[31mTimed out 5000ms waiting for �[39m�[2mexpect(�[22m�[31mpage�[39m�[2m).�[22mtoHaveScreenshot�[2m(�[22m�[32mexpected�[39m�[2m)�[22m 1567: Timeout 5000ms exceeded. ... 1584: | ^ 1585: 22 | } 1586: 23 | 1587: 24 | interface TargetPage { 1588: at screenshot (/home/runner/work/liam/liam/frontend/internal-packages/e2e/tests/vrt/vrt.test.ts:21:22) 1589: at /home/runner/work/liam/liam/frontend/internal-packages/e2e/tests/vrt/vrt.test.ts:35:3 1590: attachment #1: top-1-expected.png (image/png) ────────────────────────────────────────────────── 1591: tests/vrt/vrt.test.ts-snapshots/top-1-Mobile-Safari-linux.png 1592: ──────────────────────────────────────────────────────────────────────────────────────────────── 1593: attachment #2: top-1-actual.png (image/png) ──────────────────────────────────────────────────── 1594: test-results/vrt-vrt-top-Mobile-Safari/top-1-actual.png 1595: ──────────────────────────────────────────────────────────────────────────────────────────────── 1596: attachment #3: top-1-diff.png (image/png) ────────────────────────────────────────────────────── 1597: test-results/vrt-vrt-top-Mobile-Safari/top-1-diff.png 1598: ──────────────────────────────────────────────────────────────────────────────────────────────── 1599: Error Context: test-results/vrt-vrt-top-Mobile-Safari/error-context.md 1600: Retry #1 ─────────────────────────────────────────────────────────────────────────────────────── 1601: �[31mTest timeout of 10000ms exceeded.�[39m 1602: Error: �[31mTimed out 5000ms waiting for �[39m�[2mexpect(�[22m�[31mpage�[39m�[2m).�[22mtoHaveScreenshot�[2m(�[22m�[32mexpected�[39m�[2m)�[22m 1603: Timeout 5000ms exceeded. ... 1620: | ^ 1621: 22 | } 1622: 23 | 1623: 24 | interface TargetPage { 1624: at screenshot (/home/runner/work/liam/liam/frontend/internal-packages/e2e/tests/vrt/vrt.test.ts:21:22) 1625: at /home/runner/work/liam/liam/frontend/internal-packages/e2e/tests/vrt/vrt.test.ts:35:3 1626: attachment #1: top-1-expected.png (image/png) ────────────────────────────────────────────────── 1627: tests/vrt/vrt.test.ts-snapshots/top-1-Mobile-Safari-linux.png 1628: ──────────────────────────────────────────────────────────────────────────────────────────────── 1629: attachment #2: top-1-actual.png (image/png) ──────────────────────────────────────────────────── 1630: test-results/vrt-vrt-top-Mobile-Safari-retry1/top-1-actual.png 1631: ──────────────────────────────────────────────────────────────────────────────────────────────── 1632: attachment #3: top-1-diff.png (image/png) ────────────────────────────────────────────────────── 1633: test-results/vrt-vrt-top-Mobile-Safari-retry1/top-1-diff.png 1634: ──────────────────────────────────────────────────────────────────────────────────────────────── 1635: Error Context: test-results/vrt-vrt-top-Mobile-Safari-retry1/error-context.md 1636: attachment #5: trace (application/zip) ───────────────────────────────────────────────────────── 1637: test-results/vrt-vrt-top-Mobile-Safari-retry1/trace.zip 1638: Usage: 1639: pnpm exec playwright show-trace test-results/vrt-vrt-top-Mobile-Safari-retry1/trace.zip 1640: ──────────────────────────────────────────────────────────────────────────────────────────────── 1641: Retry #2 ─────────────────────────────────────────────────────────────────────────────────────── 1642: Error: �[31mTimed out 5000ms waiting for �[39m�[2mexpect(�[22m�[31mpage�[39m�[2m).�[22mtoHaveScreenshot�[2m(�[22m�[32mexpected�[39m�[2m)�[22m 1643: Timeout 5000ms exceeded. ... 1660: | ^ 1661: 22 | } 1662: 23 | 1663: 24 | interface TargetPage { 1664: at screenshot (/home/runner/work/liam/liam/frontend/internal-packages/e2e/tests/vrt/vrt.test.ts:21:22) 1665: at /home/runner/work/liam/liam/frontend/internal-packages/e2e/tests/vrt/vrt.test.ts:35:3 1666: attachment #1: top-1-expected.png (image/png) ────────────────────────────────────────────────── 1667: tests/vrt/vrt.test.ts-snapshots/top-1-Mobile-Safari-linux.png 1668: ──────────────────────────────────────────────────────────────────────────────────────────────── 1669: attachment #2: top-1-actual.png (image/png) ──────────────────────────────────────────────────── 1670: test-results/vrt-vrt-top-Mobile-Safari-retry2/top-1-actual.png 1671: ──────────────────────────────────────────────────────────────────────────────────────────────── 1672: attachment #3: top-1-diff.png (image/png) ────────────────────────────────────────────────────── 1673: test-results/vrt-vrt-top-Mobile-Safari-retry2/top-1-diff.png 1674: ──────────────────────────────────────────────────────────────────────────────────────────────── 1675: Error Context: test-results/vrt-vrt-top-Mobile-Safari-retry2/error-context.md 1676: Retry #3 ─────────────────────────────────────────────────────────────────────────────────────── 1677: Error: �[31mTimed out 5000ms waiting for �[39m�[2mexpect(�[22m�[31mpage�[39m�[2m).�[22mtoHaveScreenshot�[2m(�[22m�[32mexpected�[39m�[2m)�[22m 1678: Timeout 5000ms exceeded. ... 1695: | ^ 1696: 22 | } 1697: 23 | 1698: 24 | interface TargetPage { 1699: at screenshot (/home/runner/work/liam/liam/frontend/internal-packages/e2e/tests/vrt/vrt.test.ts:21:22) 1700: at /home/runner/work/liam/liam/frontend/internal-packages/e2e/tests/vrt/vrt.test.ts:35:3 1701: attachment #1: top-1-expected.png (image/png) ────────────────────────────────────────────────── 1702: tests/vrt/vrt.test.ts-snapshots/top-1-Mobile-Safari-linux.png 1703: ──────────────────────────────────────────────────────────────────────────────────────────────── 1704: attachment #2: top-1-actual.png (image/png) ──────────────────────────────────────────────────── 1705: test-results/vrt-vrt-top-Mobile-Safari-retry3/top-1-actual.png 1706: ──────────────────────────────────────────────────────────────────────────────────────────────── 1707: attachment #3: top-1-diff.png (image/png) ────────────────────────────────────────────────────── 1708: test-results/vrt-vrt-top-Mobile-Safari-retry3/top-1-diff.png 1709: ──────────────────────────────────────────────────────────────────────────────────────────────── 1710: Error Context: test-results/vrt-vrt-top-Mobile-Safari-retry3/error-context.md 1711: Retry #4 ─────────────────────────────────────────────────────────────────────────────────────── 1712: Error: �[2mexpect(�[22m�[31mpage�[39m�[2m).�[22mtoHaveScreenshot�[2m(�[22m�[32mexpected�[39m�[2m)�[22m 1713: 2335 pixels (ratio 0.01 of all image pixels) are different. ... 1735: | ^ 1736: 22 | } 1737: 23 | 1738: 24 | interface TargetPage { 1739: at screenshot (/home/runner/work/liam/liam/frontend/internal-packages/e2e/tests/vrt/vrt.test.ts:21:22) 1740: at /home/runner/work/liam/liam/frontend/internal-packages/e2e/tests/vrt/vrt.test.ts:35:3 1741: attachment #1: top-1-expected.png (image/png) ────────────────────────────────────────────────── 1742: tests/vrt/vrt.test.ts-snapshots/top-1-Mobile-Safari-linux.png 1743: ──────────────────────────────────────────────────────────────────────────────────────────────── 1744: attachment #2: top-1-actual.png (image/png) ──────────────────────────────────────────────────── 1745: test-results/vrt-vrt-top-Mobile-Safari-retry4/top-1-actual.png 1746: ──────────────────────────────────────────────────────────────────────────────────────────────── 1747: attachment #3: top-1-diff.png (image/png) ────────────────────────────────────────────────────── 1748: test-results/vrt-vrt-top-Mobile-Safari-retry4/top-1-diff.png 1749: ──────────────────────────────────────────────────────────────────────────────────────────────── 1750: Error Context: test-results/vrt-vrt-top-Mobile-Safari-retry4/error-context.md 1751: Retry #5 ─────────────────────────────────────────────────────────────────────────────────────── 1752: Error: �[2mexpect(�[22m�[31mpage�[39m�[2m).�[22mtoHaveScreenshot�[2m(�[22m�[32mexpected�[39m�[2m)�[22m 1753: 2335 pixels (ratio 0.01 of all image pixels) are different. ... 1775: | ^ 1776: 22 | } 1777: 23 | 1778: 24 | interface TargetPage { 1779: at screenshot (/home/runner/work/liam/liam/frontend/internal-packages/e2e/tests/vrt/vrt.test.ts:21:22) 1780: at /home/runner/work/liam/liam/frontend/internal-packages/e2e/tests/vrt/vrt.test.ts:35:3 1781: attachment #1: top-1-expected.png (image/png) ────────────────────────────────────────────────── 1782: tests/vrt/vrt.test.ts-snapshots/top-1-Mobile-Safari-linux.png 1783: ──────────────────────────────────────────────────────────────────────────────────────────────── 1784: attachment #2: top-1-actual.png (image/png) ──────────────────────────────────────────────────── 1785: test-results/vrt-vrt-top-Mobile-Safari-retry5/top-1-actual.png 1786: ──────────────────────────────────────────────────────────────────────────────────────────────── 1787: attachment #3: top-1-diff.png (image/png) ────────────────────────────────────────────────────── 1788: test-results/vrt-vrt-top-Mobile-Safari-retry5/top-1-diff.png 1789: ──────────────────────────────────────────────────────────────────────────────────────────────── 1790: Error Context: test-results/vrt-vrt-top-Mobile-Safari-retry5/error-context.md 1791: 2) [Mobile Safari] › tests/e2e/page.test.ts:36:5 › Edge animation should be triggered when table node is clicked 1792: �[31mTest timeout of 10000ms exceeded.�[39m 1793: Error: �[2mexpect(�[22m�[31mlocator�[39m�[2m).�[22mtoBeVisible�[2m()�[22m 1794: Locator: getByRole('img', { name: 'Edge from accounts to account_aliases' }).locator('ellipse').first() 1795: Expected: visible 1796: Received: <element(s) not found> 1797: Call log: 1798: �[2m - expect.toBeVisible with timeout 5000ms�[22m 1799: �[2m - waiting for getByRole('img', { name: 'Edge from accounts to account_aliases' }).locator('ellipse').first()�[22m 1800: 51 | 1801: 52 | const edgeEllipseAfter = edge.locator('ellipse').first() 1802: > 53 | await expect(edgeEllipseAfter).toBeVisible() 1803: | ^ 1804: 54 | }) 1805: 55 | 1806: 56 | test('Cardinality should be highlighted when table node is clicked', async ({ 1807: at /home/runner/work/liam/liam/frontend/internal-packages/e2e/tests/e2e/page.test.ts:53:34 1808: Error Context: test-results/e2e-page-Edge-animation-sh-894b5--when-table-node-is-clicked-Mobile-Safari/error-context.md 1809: Retry #1 ─────────────────────────────────────────────────────────────────────────────────────── 1810: �[31mTest timeout of 10000ms exceeded.�[39m 1811: Error: �[2mexpect(�[22m�[31mlocator�[39m�[2m).�[22mtoBeVisible�[2m()�[22m 1812: Locator: getByRole('img', { name: 'Edge from accounts to account_aliases' }).locator('ellipse').first() 1813: Expected: visible 1814: Received: <element(s) not found> 1815: Call log: 1816: �[2m - expect.toBeVisible with timeout 5000ms�[22m 1817: �[2m - waiting for getByRole('img', { name: 'Edge from accounts to account_aliases' }).locator('ellipse').first()�[22m 1818: 51 | 1819: 52 | const edgeEllipseAfter = edge.locator('ellipse').first() 1820: > 53 | await expect(edgeEllipseAfter).toBeVisible() 1821: | ^ 1822: 54 | }) 1823: 55 | 1824: 56 | test('Cardinality should be highlighted when table node is clicked', async ({ 1825: at /home/runner/work/liam/liam/frontend/internal-packages/e2e/tests/e2e/page.test.ts:53:34 1826: Error Context: test-results/e2e-page-Edge-animation-sh-894b5--when-table-node-is-clicked-Mobile-Safari-retry1/error-context.md 1827: attachment #2: trace (application/zip) ───────────────────────────────────────────────────────── 1828: test-results/e2e-page-Edge-animation-sh-894b5--when-table-node-is-clicked-Mobile-Safari-retry1/trace.zip 1829: Usage: 1830: pnpm exec playwright show-trace test-results/e2e-page-Edge-animation-sh-894b5--when-table-node-is-clicked-Mobile-Safari-retry1/trace.zip 1831: ──────────────────────────────────────────────────────────────────────────────────────────────── 1832: 3) [Mobile Safari] › tests/e2e/page.test.ts:56:5 › Cardinality should be highlighted when table node is clicked 1833: �[31mTest timeout of 10000ms exceeded.�[39m 1834: 1 failed 1835: [Mobile Safari] › tests/vrt/vrt.test.ts:34:5 › top ───────────────────────────────────────────── 1836: 2 flaky 1837: [Mobile Safari] › tests/e2e/page.test.ts:36:5 › Edge animation should be triggered when table node is clicked 1838: [Mobile Safari] › tests/e2e/page.test.ts:56:5 › Cardinality should be highlighted when table node is clicked 1839: 9 skipped 1840: 5 passed (3.5m) 1841: ##[error]Process completed with exit code 1. 1842: ##[group]Run actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02