Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(preview): add experimental support for observing full documents #7397

Merged
merged 3 commits into from
Jan 17, 2025

Conversation

bjoerge
Copy link
Member

@bjoerge bjoerge commented Aug 20, 2024

Description

In certain cases its useful to be able to subscribe to the complete version of a document (by id) and receive updates to it as it changes in the backend. The only way to achieve this in the Studio today involves either setting up a full optimistic mutation pipeline, or setting up a "live query", both of which adds a separate listener connection per document. This doesn't scale well, so this PR proposes an alternative approach that re-uses the global listener currently use for Studio previews.

The intended use is cases where you always need the latest version of a complete document, but don't need to be able to do optimistic updates to it (i.e. you can live with a server roundtrip).

It introduces two new method to the preview store API, both unstable and marked as internal for now:

  • unstable_observeDocument(id: string) - returns an observable that will emit new versions of the document as it changes remotely.
  • unstable_observeDocumentIds(ids: string[]) - thin convenience wrapper over the above that supports subscribing to multiple documents in one go

What to review

The global query listener is now set up with effectFormat=mendoza which makes the mutation events include a (usually compact) patch that is used to patch the local version of the document as it receives remote changes. This will add a little bit of overhead and it might be worth considering adding this only if needed. That said, we did receive regular mutations over this listener up until recently, which tends to be much larger in size than mendoza patches.

Testing

These methods are only used in a feature branch for now, we'll look into some automated tests for them as we start relying on them more.

Notes for release

n/a - internal for now

@bjoerge bjoerge requested a review from a team as a code owner August 20, 2024 15:07
@bjoerge bjoerge requested review from rexxars and removed request for a team August 20, 2024 15:07
Copy link

vercel bot commented Aug 20, 2024

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

Name Status Preview Comments Updated (UTC)
page-building-studio ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jan 14, 2025 0:14am
performance-studio ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jan 14, 2025 0:14am
test-compiled-studio ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jan 14, 2025 0:14am
test-studio ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jan 14, 2025 0:14am
2 Skipped Deployments
Name Status Preview Comments Updated (UTC)
studio-workshop ⬜️ Ignored (Inspect) Visit Preview Jan 14, 2025 0:14am
test-next-studio ⬜️ Ignored (Inspect) Visit Preview Jan 14, 2025 0:14am

Copy link
Contributor

No changes to documentation

Copy link
Contributor

github-actions bot commented Aug 20, 2024

Component Testing Report Updated Jan 14, 2025 12:17 PM (UTC)

✅ All Tests Passed -- expand for details
File Status Duration Passed Skipped Failed
comments/CommentInput.spec.tsx ✅ Passed (Inspect) 1m 7s 15 0 0
formBuilder/ArrayInput.spec.tsx ✅ Passed (Inspect) 12s 3 0 0
formBuilder/inputs/PortableText/Annotations.spec.tsx ✅ Passed (Inspect) 38s 6 0 0
formBuilder/inputs/PortableText/copyPaste/CopyPaste.spec.tsx ✅ Passed (Inspect) 51s 11 7 0
formBuilder/inputs/PortableText/copyPaste/CopyPasteFields.spec.tsx ✅ Passed (Inspect) 0s 0 12 0
formBuilder/inputs/PortableText/Decorators.spec.tsx ✅ Passed (Inspect) 26s 6 0 0
formBuilder/inputs/PortableText/DisableFocusAndUnset.spec.tsx ✅ Passed (Inspect) 14s 3 0 0
formBuilder/inputs/PortableText/DragAndDrop.spec.tsx ✅ Passed (Inspect) 27s 6 0 0
formBuilder/inputs/PortableText/FocusTracking.spec.tsx ✅ Passed (Inspect) 1m 7s 15 0 0
formBuilder/inputs/PortableText/Input.spec.tsx ✅ Passed (Inspect) 1m 27s 21 0 0
formBuilder/inputs/PortableText/ObjectBlock.spec.tsx ✅ Passed (Inspect) 1m 39s 18 0 0
formBuilder/inputs/PortableText/PresenceCursors.spec.tsx ✅ Passed (Inspect) 12s 3 9 0
formBuilder/inputs/PortableText/Styles.spec.tsx ✅ Passed (Inspect) 26s 6 0 0
formBuilder/inputs/PortableText/Toolbar.spec.tsx ✅ Passed (Inspect) 1m 42s 21 0 0
formBuilder/tree-editing/TreeEditing.spec.tsx ✅ Passed (Inspect) 0s 0 3 0
formBuilder/tree-editing/TreeEditingNestedObjects.spec.tsx ✅ Passed (Inspect) 0s 0 3 0

Copy link
Member

@rexxars rexxars left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code looks good, but should have tests unless it is only going to be used for PoC-type experiments

@bjoerge
Copy link
Member Author

bjoerge commented Aug 27, 2024

should have tests unless it is only going to be used for PoC-type experiments

Good callout :)

Added tests in 2897248

@pedrobonamin pedrobonamin force-pushed the preview/add-observe-full-documents branch from 2897248 to 34e02e1 Compare January 14, 2025 11:56
pedrobonamin
pedrobonamin previously approved these changes Jan 14, 2025
Copy link
Contributor

@pedrobonamin pedrobonamin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me, we have been using it in corel and it works great

Thanks for doing this

@pedrobonamin
Copy link
Contributor

Updated the tests to Vitest

Copy link
Contributor

github-actions bot commented Jan 14, 2025

⚡️ Editor Performance Report

Updated Tue, 14 Jan 2025 12:18:57 GMT

Benchmark reference
latency of sanity@latest
experiment
latency of this branch
Δ (%)
latency difference
article (title) 22.0 efps (46ms) 23.5 efps (43ms) -3ms (-6.6%)
article (body) 69.7 efps (14ms) 63.3 efps (16ms) +1ms (-/-%)
article (string inside object) 25.0 efps (40ms) 26.3 efps (38ms) -2ms (-5.0%)
article (string inside array) 22.2 efps (45ms) 21.7 efps (46ms) +1ms (+2.2%)
recipe (name) 50.0 efps (20ms) 50.0 efps (20ms) +0ms (-/-%)
recipe (description) 55.6 efps (18ms) 55.6 efps (18ms) +0ms (-/-%)
recipe (instructions) 99.9+ efps (5ms) 99.9+ efps (5ms) +0ms (-/-%)
synthetic (title) 18.2 efps (55ms) 18.5 efps (54ms) -1ms (-1.8%)
synthetic (string inside object) 19.2 efps (52ms) 20.0 efps (50ms) -2ms (-3.8%)

efps — editor "frames per second". The number of updates assumed to be possible within a second.

Derived from input latency. efps = 1000 / input_latency

Detailed information

🏠 Reference result

The performance result of sanity@latest

Benchmark latency p75 p90 p99 blocking time test duration
article (title) 46ms 52ms 76ms 474ms 911ms 11.0s
article (body) 14ms 17ms 21ms 37ms 226ms 5.4s
article (string inside object) 40ms 42ms 52ms 172ms 156ms 7.0s
article (string inside array) 45ms 48ms 55ms 125ms 321ms 7.5s
recipe (name) 20ms 21ms 23ms 39ms 0ms 7.1s
recipe (description) 18ms 19ms 20ms 29ms 0ms 4.5s
recipe (instructions) 5ms 7ms 8ms 11ms 0ms 3.0s
synthetic (title) 55ms 56ms 61ms 126ms 537ms 12.2s
synthetic (string inside object) 52ms 55ms 61ms 377ms 653ms 8.6s

🧪 Experiment result

The performance result of this branch

Benchmark latency p75 p90 p99 blocking time test duration
article (title) 43ms 66ms 85ms 547ms 1042ms 11.7s
article (body) 16ms 17ms 19ms 81ms 76ms 5.4s
article (string inside object) 38ms 42ms 47ms 275ms 385ms 7.0s
article (string inside array) 46ms 50ms 53ms 231ms 298ms 7.3s
recipe (name) 20ms 22ms 25ms 41ms 0ms 7.2s
recipe (description) 18ms 20ms 24ms 39ms 0ms 4.5s
recipe (instructions) 5ms 7ms 7ms 8ms 0ms 3.2s
synthetic (title) 54ms 56ms 60ms 155ms 758ms 12.4s
synthetic (string inside object) 50ms 53ms 60ms 431ms 1101ms 8.3s

📚 Glossary

column definitions

  • benchmark — the name of the test, e.g. "article", followed by the label of the field being measured, e.g. "(title)".
  • latency — the time between when a key was pressed and when it was rendered. derived from a set of samples. the median (p50) is shown to show the most common latency.
  • p75 — the 75th percentile of the input latency in the test run. 75% of the sampled inputs in this benchmark were processed faster than this value. this provides insight into the upper range of typical performance.
  • p90 — the 90th percentile of the input latency in the test run. 90% of the sampled inputs were faster than this. this metric helps identify slower interactions that occurred less frequently during the benchmark.
  • p99 — the 99th percentile of the input latency in the test run. only 1% of sampled inputs were slower than this. this represents the worst-case scenarios encountered during the benchmark, useful for identifying potential performance outliers.
  • blocking time — the total time during which the main thread was blocked, preventing user input and UI updates. this metric helps identify performance bottlenecks that may cause the interface to feel unresponsive.
  • test duration — how long the test run took to complete.

@bjoerge bjoerge added this pull request to the merge queue Jan 17, 2025
Merged via the queue into next with commit 56bcd0a Jan 17, 2025
57 checks passed
@bjoerge bjoerge deleted the preview/add-observe-full-documents branch January 17, 2025 08:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants