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

refactor(preview): clean up preview with fallback logic #8904

Merged
merged 2 commits into from
Mar 13, 2025

Conversation

bjoerge
Copy link
Member

@bjoerge bjoerge commented Mar 12, 2025

Description

Fixes a couple of issues:

1. Search previews didn't reflect current perspective

Before

image

After

image

2. Document list previews didn't reflect current perspective

Before

image

After

image

What to review

Took the opportunity to clean up and document the logic related to getting preview values and fallback
Also fixed a bug that leaked document.title in previews for cases where the document was missing.

Testing

Switching between release/draft/published should use the correct preview for search results (global search, reference search), document lists etc.

Notes for release

  • Fixed an issue where list previews sometimes did not reflect the current release.

Copy link

vercel bot commented Mar 12, 2025

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 Mar 12, 2025 5:43pm
performance-studio ✅ Ready (Inspect) Visit Preview Mar 12, 2025 5:43pm
test-studio ✅ Ready (Inspect) Visit Preview 💬 Add feedback Mar 12, 2025 5:43pm
2 Skipped Deployments
Name Status Preview Comments Updated (UTC)
studio-workshop ⬜️ Ignored (Inspect) Visit Preview Mar 12, 2025 5:43pm
test-next-studio ⬜️ Ignored (Inspect) Mar 12, 2025 5:43pm

Copy link
Contributor

github-actions bot commented Mar 12, 2025

Coverage Report

Status Category Percentage Covered / Total
🔵 Lines 42.01% 54448 / 129591
🔵 Statements 42.01% 54448 / 129591
🔵 Functions 46.89% 2729 / 5820
🔵 Branches 79.41% 10202 / 12847
File Coverage
File Stmts Branches Functions Lines Uncovered Lines
Changed Files
packages/sanity/src/core/preview/utils/getPreviewValueWithFallback.tsx 20% 100% 0% 20% 4-14, 45-46
packages/sanity/src/core/releases/tool/detail/useBundleDocuments.ts 8.22% 100% 0% 8.22% 66-173, 176-261, 264-303, 310-328
packages/sanity/src/core/studio/components/navbar/StudioNavbar.tsx 16.34% 100% 0% 16.34% 69-309
packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/SearchResultItem.tsx 15.11% 100% 0% 15.11% 42-132
packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/SearchResultItemPreview.tsx 17.14% 100% 0% 17.14% 46-116
packages/sanity/src/core/tasks/components/form/fields/TargetField.tsx 14.1% 100% 0% 14.1% 28-42, 45-50, 76-143, 152-250
packages/sanity/src/presentation/editor/ContentEditor.tsx 0% 0% 0% 0% 1-155
packages/sanity/src/structure/components/paneItem/PaneItemPreview.tsx 10.86% 100% 0% 10.86% 38-93
Generated in workflow #32199 for commit 4653034 by the Vitest Coverage Report Action

@bjoerge bjoerge force-pushed the preview-use-current-perspective branch from ee7beb1 to e2564a1 Compare March 12, 2025 13:34
Copy link
Contributor

No changes to documentation

Copy link
Contributor

github-actions bot commented Mar 12, 2025

⚡️ Editor Performance Report

Updated Wed, 12 Mar 2025 17:49:19 GMT

Benchmark reference
latency of sanity@latest
experiment
latency of this branch
Δ (%)
latency difference
article (title) 17.5 efps (57ms) 17.2 efps (58ms) +1ms (+1.8%)
article (body) 63.3 efps (16ms) 63.7 efps (16ms) -0ms (-/-%)
article (string inside object) 22.7 efps (44ms) 18.5 efps (54ms) +10ms (+22.7%) 🔴
article (string inside array) 21.3 efps (47ms) 17.4 efps (58ms) +11ms (+22.3%) 🔴
recipe (name) 29.4 efps (34ms) 45.5 efps (22ms) -12ms (-35.3%)
recipe (description) 32.3 efps (31ms) 52.6 efps (19ms) -12ms (-38.7%)
recipe (instructions) 99.9+ efps (5ms) 99.9+ efps (5ms) +0ms (-/-%)
synthetic (title) 19.2 efps (52ms) 19.2 efps (52ms) +0ms (-/-%)
synthetic (string inside object) 20.0 efps (50ms) 19.2 efps (52ms) +2ms (+4.0%)

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) 57ms 61ms 85ms 277ms 1509ms 12.7s
article (body) 16ms 19ms 21ms 159ms 213ms 5.8s
article (string inside object) 44ms 47ms 49ms 62ms 85ms 7.3s
article (string inside array) 47ms 50ms 53ms 146ms 367ms 7.4s
recipe (name) 34ms 36ms 42ms 71ms 97ms 8.9s
recipe (description) 31ms 33ms 37ms 51ms 44ms 6.5s
recipe (instructions) 5ms 7ms 8ms 9ms 0ms 3.1s
synthetic (title) 52ms 55ms 59ms 205ms 830ms 13.1s
synthetic (string inside object) 50ms 51ms 53ms 201ms 554ms 7.6s

🧪 Experiment result

The performance result of this branch

Benchmark latency p75 p90 p99 blocking time test duration
article (title) 58ms 72ms 95ms 293ms 1659ms 13.1s
article (body) 16ms 16ms 17ms 43ms 62ms 5.1s
article (string inside object) 54ms 57ms 60ms 103ms 1049ms 8.8s
article (string inside array) 58ms 62ms 73ms 239ms 1487ms 9.2s
recipe (name) 22ms 23ms 25ms 41ms 9ms 7.3s
recipe (description) 19ms 20ms 21ms 25ms 0ms 4.7s
recipe (instructions) 5ms 6ms 7ms 9ms 0ms 3.1s
synthetic (title) 52ms 54ms 58ms 204ms 753ms 12.2s
synthetic (string inside object) 52ms 53ms 55ms 59ms 588ms 7.6s

📚 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 marked this pull request as ready for review March 12, 2025 13:50
@bjoerge bjoerge requested review from a team as code owners March 12, 2025 13:50
@bjoerge bjoerge requested review from juice49 and removed request for a team March 12, 2025 13:50
@@ -14,25 +13,31 @@ export function getMissingDocumentFallback(document: Partial<SanityDocument> | P
}
}

export type Values = {
Copy link
Member Author

@bjoerge bjoerge Mar 12, 2025

Choose a reason for hiding this comment

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

Not very satisfied with the name of this type 🙄 suggestions appreciated

Copy link
Contributor

Choose a reason for hiding this comment

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

PreviewSources?

Copy link
Member Author

Choose a reason for hiding this comment

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

I like that! Aligns with the source parameter(s) of Object.assign

Copy link
Member Author

Choose a reason for hiding this comment

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

Fixed in 4653034, thank you!

@@ -84,7 +84,7 @@ export function PaneItemPreview(props: PaneItemPreviewProps) {

return (
<SanityDefaultPreview
{...getPreviewValueWithFallback({document, snapshot, original})}
{...getPreviewValueWithFallback({snapshot, original, fallback: value})}
Copy link
Member Author

Choose a reason for hiding this comment

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

previously document would refer to the global document here 🙈

Copy link
Contributor

Choose a reason for hiding this comment

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

Great catch! Thank you! 🙇

* last resort fallback in case we don't have anything to preview
* this can be a hard-coded preview value, or a document stub
*/
fallback?: Partial<SanityDocument> | PreviewValue
Copy link
Member Author

Choose a reason for hiding this comment

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

hoping this makes it slightly more clear that you can pass the document and/or a hard coded preview stub as fallback

Copy link
Contributor

Choose a reason for hiding this comment

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

Seems like a nice improvement. I wondered whether it might be even better to use a union to ensure at least one value is passed, but upon further consideration, I'm not sure that's possible or desired.

Copy link
Member Author

Choose a reason for hiding this comment

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

Thought about it briefly, but that would be a union of three objects, each with one of these keys required and the other two optional, right? I concluded the added complexity wasn't justified, but happy to reconsider (but I'd prefer a follow-up PR for that).

Copy link
Contributor

Choose a reason for hiding this comment

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

I agree with you.

juice49
juice49 previously approved these changes Mar 12, 2025
Copy link
Contributor

@juice49 juice49 left a comment

Choose a reason for hiding this comment

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

Thanks for tackling this! It looks good to me when testing in browser.

@bjoerge bjoerge merged commit 362c247 into next Mar 13, 2025
60 checks passed
@bjoerge bjoerge deleted the preview-use-current-perspective branch March 13, 2025 09:46
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.

None yet

2 participants