change timing markers to be precise on the timeline - #2775

Merged
mitul-s merged 3 commits into
mainfrom
ms/timing-markers
Jul 6, 2026
Merged

change timing markers to be precise on the timeline #2775
mitul-s merged 3 commits into
mainfrom
ms/timing-markers

Conversation

@mitul-s

@mitul-smitul-s commented Jul 4, 2026

Copy link
Copy Markdown
Contributor

What

Makes the timing labels on the trace viewer timeline precise when zoomed in.

When the timeline is zoomed in far enough that the ruler's tick step drops below one second, the tick labels were formatted with whole-second precision. This produced duplicate, imprecise labels — e.g. a ~3s window with a 500ms step rendered 0s, 1s, 1s, 2s, 2s, 3s instead of distinct values. This PR scales each label's decimal precision to the tick step so every tick reads accurately.

Changes

  • computeTimeMarkers (new-trace-viewer/utils.ts) — derive fractionDigits from the tick interval. Steps >= 1s keep clean whole-second labels; sub-second steps use enough decimals to stay distinct (e.g. 500ms, 1.5s, 2.5s).
  • formatDurationPrecise (lib/utils.ts)
    • Added an optional fractionDigits argument (default 2) that controls both the number of decimals and the rounding granularity.
    • Trailing zeros are now trimmed, so 2.00s2s and 1.50s1.5s, while sub-second detail is preserved (1626ms1.63s, never 2s).
    • Dropped the fixed two-digit Intl.NumberFormat helper in favor of toFixed(fractionDigits).
  • Timeline gap labels & hover cursor label — switched from formatDuration to formatDurationPrecise so gap durations and the hovered-time indicator show the same precise values.

Tests

  • Added computeTimeMarkers tests covering sub-second, whole-second, and millisecond-zoom windows, asserting labels are distinct.
  • Added formatDurationPrecise tests for millisecond values, sub-second precision, trailing-zero trimming, the custom fractionDigits argument, and minute-plus decomposition.

Changeset

Patch release for @workflow/web-shared.

@mitul-s
mitul-s requested review from a team and ijjk as code ownersJuly 4, 2026 22:02
@changeset-bot

changeset-botBot commented Jul 4, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 53f0baf

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 16 packages
NameType
@workflow/web-sharedPatch
@workflow/webPatch
@workflow/cliPatch
@workflow/nitroPatch
workflowPatch
@workflow/world-testingPatch
@workflow/nuxtPatch
@workflow/corePatch
@workflow/buildersPatch
@workflow/nextPatch
@workflow/vitestPatch
@workflow/astroPatch
@workflow/nestPatch
@workflow/rollupPatch
@workflow/sveltekitPatch
@workflow/vitePatch

Not sure what this means? Click here to learn what changesets are.

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

@vercel

vercelBot commented Jul 4, 2026

Copy link
Copy Markdown
Contributor

@vercelvercelBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Additional Suggestion:

Old test file test/format-duration-precise.test.ts still asserts two-decimal output ("45.20s", "1m 0.00s") that no longer matches the trimmed-zero output of formatDurationPrecise, so pnpm test/CI fails.

Fix on Vercel

mitul-sand others added 2 commits July 6, 2026 17:39
…ts two-decimal output ("45.20s", "1m 0.00s") that no longer matches the trimmed-zero output of `formatDurationPrecise`, so `pnpm test`/CI fails.
This commit fixes the issue reported at packages/web-shared/test/format-duration-precise.test.ts:15
## Bug
The PR changed `formatDurationPrecise` (in `packages/web-shared/src/lib/utils.ts`) to trim trailing zeros by wrapping the fractional value in `Number(x.toFixed(fractionDigits))`:
```ts
if (normalizedMs < MS_IN_MINUTE) {
return `${Number((normalizedMs / MS_IN_SECOND).toFixed(fractionDigits))}s`;
}
...
parts.push(`${Number(seconds.toFixed(fractionDigits))}s`);
```
`Number("45.20")` → `45.2`, `Number("0.00")` → `0`, so whole/half seconds now render without padding.
A new test file `packages/web-shared/src/lib/utils.test.ts` reflects this behavior, but the pre-existing `packages/web-shared/test/format-duration-precise.test.ts` was left untouched and still asserts the **old** padded output.
## Concrete trigger
Reproduced the actual function output (integer decomposition + trimmed zeros):
| Input | Old assertion | New actual output |
|-------|---------------|-------------------|
| `45200` | `45.20s` | `45.2s` |
| `999.6` | `1.00s` | `1s` |
| `999.5` | `1.00s` | `1s` |
| `59999` | `1m 0.00s` | `1m 0s` |
| `59995` | `1m 0.00s` | `1m 0s` |
| `119999` | `2m 0.00s` | `2m 0s` |
| `3659999` | `1h 1m 0.00s` | `1h 1m 0s` |
| `86459999` | `1d 1m 0.00s` | `1d 1m 0s` |
The root `vitest.config.ts` uses default include globs, so `test/*.test.ts` runs and these assertions fail, breaking CI. (I couldn't run vitest directly in the sandbox because dev deps weren't installed / `vitest/config` unresolved, so I reproduced the exact function logic in a standalone Node script to confirm the outputs.)
## Fix
Updated the stale assertions in `test/format-duration-precise.test.ts` to the trimmed-zero outputs, and adjusted the file-level doc comment (which referenced `"1m 0.00s"` / `"60.00s"`) to describe the current behavior.
Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
Co-authored-by: mitul-s <mitulxshah@gmail.com>
@mitul-s
mitul-s merged commit 8a76688 into mainJul 6, 2026
59 checks passed
@mitul-s
mitul-s deleted the ms/timing-markers branch July 6, 2026 22:27
@github-actions

Copy link
Copy Markdown
Contributor

No backport to stable for 8a76688 (AI decision).

This commit builds entirely on main-only functionality: the formatDurationPrecise function does not exist anywhere on stable, the packages/web-shared/src/components/new-trace-viewer/ directory is absent on stable, and the touched test/format-duration-precise.test.ts file is not present on stable either. There is no corresponding code on stable to apply this fix to, so a backport would be meaningless and would not cleanly cherry-pick.

To override, re-run the Backport to stable workflow manually via workflow_dispatch and paste this commit SHA into the ref input:

8a766884cf5df20872b6a516008f854f407fe259

Sign up for freeto 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.

2 participants

@mitul-s@karthikscale3
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Skip to content

change timing markers to be precise on the timeline - #2775

Merged
mitul-s merged 3 commits into
mainfrom
ms/timing-markers
Jul 6, 2026
Merged

change timing markers to be precise on the timeline #2775
mitul-s merged 3 commits into
mainfrom
ms/timing-markers

Conversation

@mitul-s

@mitul-smitul-s commented Jul 4, 2026

Copy link
Copy Markdown
Contributor

What

Makes the timing labels on the trace viewer timeline precise when zoomed in.

When the timeline is zoomed in far enough that the ruler's tick step drops below one second, the tick labels were formatted with whole-second precision. This produced duplicate, imprecise labels — e.g. a ~3s window with a 500ms step rendered 0s, 1s, 1s, 2s, 2s, 3s instead of distinct values. This PR scales each label's decimal precision to the tick step so every tick reads accurately.

Changes

  • computeTimeMarkers (new-trace-viewer/utils.ts) — derive fractionDigits from the tick interval. Steps >= 1s keep clean whole-second labels; sub-second steps use enough decimals to stay distinct (e.g. 500ms, 1.5s, 2.5s).
  • formatDurationPrecise (lib/utils.ts)
    • Added an optional fractionDigits argument (default 2) that controls both the number of decimals and the rounding granularity.
    • Trailing zeros are now trimmed, so 2.00s2s and 1.50s1.5s, while sub-second detail is preserved (1626ms1.63s, never 2s).
    • Dropped the fixed two-digit Intl.NumberFormat helper in favor of toFixed(fractionDigits).
  • Timeline gap labels & hover cursor label — switched from formatDuration to formatDurationPrecise so gap durations and the hovered-time indicator show the same precise values.

Tests

  • Added computeTimeMarkers tests covering sub-second, whole-second, and millisecond-zoom windows, asserting labels are distinct.
  • Added formatDurationPrecise tests for millisecond values, sub-second precision, trailing-zero trimming, the custom fractionDigits argument, and minute-plus decomposition.

Changeset

Patch release for @workflow/web-shared.

@mitul-s
mitul-s requested review from a team and ijjk as code ownersJuly 4, 2026 22:02
@changeset-bot

changeset-botBot commented Jul 4, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 53f0baf

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 16 packages
NameType
@workflow/web-sharedPatch
@workflow/webPatch
@workflow/cliPatch
@workflow/nitroPatch
workflowPatch
@workflow/world-testingPatch
@workflow/nuxtPatch
@workflow/corePatch
@workflow/buildersPatch
@workflow/nextPatch
@workflow/vitestPatch
@workflow/astroPatch
@workflow/nestPatch
@workflow/rollupPatch
@workflow/sveltekitPatch
@workflow/vitePatch

Not sure what this means? Click here to learn what changesets are.

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

@vercel

vercelBot commented Jul 4, 2026

Copy link
Copy Markdown
Contributor

@vercelvercelBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Additional Suggestion:

Old test file test/format-duration-precise.test.ts still asserts two-decimal output ("45.20s", "1m 0.00s") that no longer matches the trimmed-zero output of formatDurationPrecise, so pnpm test/CI fails.

Fix on Vercel

mitul-sand others added 2 commits July 6, 2026 17:39
…ts two-decimal output ("45.20s", "1m 0.00s") that no longer matches the trimmed-zero output of `formatDurationPrecise`, so `pnpm test`/CI fails.
This commit fixes the issue reported at packages/web-shared/test/format-duration-precise.test.ts:15
## Bug
The PR changed `formatDurationPrecise` (in `packages/web-shared/src/lib/utils.ts`) to trim trailing zeros by wrapping the fractional value in `Number(x.toFixed(fractionDigits))`:
```ts
if (normalizedMs < MS_IN_MINUTE) {
return `${Number((normalizedMs / MS_IN_SECOND).toFixed(fractionDigits))}s`;
}
...
parts.push(`${Number(seconds.toFixed(fractionDigits))}s`);
```
`Number("45.20")` → `45.2`, `Number("0.00")` → `0`, so whole/half seconds now render without padding.
A new test file `packages/web-shared/src/lib/utils.test.ts` reflects this behavior, but the pre-existing `packages/web-shared/test/format-duration-precise.test.ts` was left untouched and still asserts the **old** padded output.
## Concrete trigger
Reproduced the actual function output (integer decomposition + trimmed zeros):
| Input | Old assertion | New actual output |
|-------|---------------|-------------------|
| `45200` | `45.20s` | `45.2s` |
| `999.6` | `1.00s` | `1s` |
| `999.5` | `1.00s` | `1s` |
| `59999` | `1m 0.00s` | `1m 0s` |
| `59995` | `1m 0.00s` | `1m 0s` |
| `119999` | `2m 0.00s` | `2m 0s` |
| `3659999` | `1h 1m 0.00s` | `1h 1m 0s` |
| `86459999` | `1d 1m 0.00s` | `1d 1m 0s` |
The root `vitest.config.ts` uses default include globs, so `test/*.test.ts` runs and these assertions fail, breaking CI. (I couldn't run vitest directly in the sandbox because dev deps weren't installed / `vitest/config` unresolved, so I reproduced the exact function logic in a standalone Node script to confirm the outputs.)
## Fix
Updated the stale assertions in `test/format-duration-precise.test.ts` to the trimmed-zero outputs, and adjusted the file-level doc comment (which referenced `"1m 0.00s"` / `"60.00s"`) to describe the current behavior.
Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
Co-authored-by: mitul-s <mitulxshah@gmail.com>
@mitul-s
mitul-s merged commit 8a76688 into mainJul 6, 2026
59 checks passed
@mitul-s
mitul-s deleted the ms/timing-markers branch July 6, 2026 22:27
@github-actions

Copy link
Copy Markdown
Contributor

No backport to stable for 8a76688 (AI decision).

This commit builds entirely on main-only functionality: the formatDurationPrecise function does not exist anywhere on stable, the packages/web-shared/src/components/new-trace-viewer/ directory is absent on stable, and the touched test/format-duration-precise.test.ts file is not present on stable either. There is no corresponding code on stable to apply this fix to, so a backport would be meaningless and would not cleanly cherry-pick.

To override, re-run the Backport to stable workflow manually via workflow_dispatch and paste this commit SHA into the ref input:

8a766884cf5df20872b6a516008f854f407fe259

Sign up for freeto 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.

2 participants

@mitul-s@karthikscale3
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

change timing markers to be precise on the timeline - #2775

Merged
mitul-s merged 3 commits into
mainfrom
ms/timing-markers
Jul 6, 2026
Merged

change timing markers to be precise on the timeline #2775
mitul-s merged 3 commits into
mainfrom
ms/timing-markers

Conversation

@mitul-s

@mitul-smitul-s commented Jul 4, 2026

Copy link
Copy Markdown
Contributor

What

Makes the timing labels on the trace viewer timeline precise when zoomed in.

When the timeline is zoomed in far enough that the ruler's tick step drops below one second, the tick labels were formatted with whole-second precision. This produced duplicate, imprecise labels — e.g. a ~3s window with a 500ms step rendered 0s, 1s, 1s, 2s, 2s, 3s instead of distinct values. This PR scales each label's decimal precision to the tick step so every tick reads accurately.

Changes

  • computeTimeMarkers (new-trace-viewer/utils.ts) — derive fractionDigits from the tick interval. Steps >= 1s keep clean whole-second labels; sub-second steps use enough decimals to stay distinct (e.g. 500ms, 1.5s, 2.5s).
  • formatDurationPrecise (lib/utils.ts)
    • Added an optional fractionDigits argument (default 2) that controls both the number of decimals and the rounding granularity.
    • Trailing zeros are now trimmed, so 2.00s2s and 1.50s1.5s, while sub-second detail is preserved (1626ms1.63s, never 2s).
    • Dropped the fixed two-digit Intl.NumberFormat helper in favor of toFixed(fractionDigits).
  • Timeline gap labels & hover cursor label — switched from formatDuration to formatDurationPrecise so gap durations and the hovered-time indicator show the same precise values.

Tests

  • Added computeTimeMarkers tests covering sub-second, whole-second, and millisecond-zoom windows, asserting labels are distinct.
  • Added formatDurationPrecise tests for millisecond values, sub-second precision, trailing-zero trimming, the custom fractionDigits argument, and minute-plus decomposition.

Changeset

Patch release for @workflow/web-shared.

@mitul-s
mitul-s requested review from a team and ijjk as code ownersJuly 4, 2026 22:02
@changeset-bot

changeset-botBot commented Jul 4, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 53f0baf

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 16 packages
NameType
@workflow/web-sharedPatch
@workflow/webPatch
@workflow/cliPatch
@workflow/nitroPatch
workflowPatch
@workflow/world-testingPatch
@workflow/nuxtPatch
@workflow/corePatch
@workflow/buildersPatch
@workflow/nextPatch
@workflow/vitestPatch
@workflow/astroPatch
@workflow/nestPatch
@workflow/rollupPatch
@workflow/sveltekitPatch
@workflow/vitePatch

Not sure what this means? Click here to learn what changesets are.

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

@vercel

vercelBot commented Jul 4, 2026

Copy link
Copy Markdown
Contributor

@vercelvercelBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Additional Suggestion:

Old test file test/format-duration-precise.test.ts still asserts two-decimal output ("45.20s", "1m 0.00s") that no longer matches the trimmed-zero output of formatDurationPrecise, so pnpm test/CI fails.

Fix on Vercel

mitul-sand others added 2 commits July 6, 2026 17:39
…ts two-decimal output ("45.20s", "1m 0.00s") that no longer matches the trimmed-zero output of `formatDurationPrecise`, so `pnpm test`/CI fails.
This commit fixes the issue reported at packages/web-shared/test/format-duration-precise.test.ts:15
## Bug
The PR changed `formatDurationPrecise` (in `packages/web-shared/src/lib/utils.ts`) to trim trailing zeros by wrapping the fractional value in `Number(x.toFixed(fractionDigits))`:
```ts
if (normalizedMs < MS_IN_MINUTE) {
return `${Number((normalizedMs / MS_IN_SECOND).toFixed(fractionDigits))}s`;
}
...
parts.push(`${Number(seconds.toFixed(fractionDigits))}s`);
```
`Number("45.20")` → `45.2`, `Number("0.00")` → `0`, so whole/half seconds now render without padding.
A new test file `packages/web-shared/src/lib/utils.test.ts` reflects this behavior, but the pre-existing `packages/web-shared/test/format-duration-precise.test.ts` was left untouched and still asserts the **old** padded output.
## Concrete trigger
Reproduced the actual function output (integer decomposition + trimmed zeros):
| Input | Old assertion | New actual output |
|-------|---------------|-------------------|
| `45200` | `45.20s` | `45.2s` |
| `999.6` | `1.00s` | `1s` |
| `999.5` | `1.00s` | `1s` |
| `59999` | `1m 0.00s` | `1m 0s` |
| `59995` | `1m 0.00s` | `1m 0s` |
| `119999` | `2m 0.00s` | `2m 0s` |
| `3659999` | `1h 1m 0.00s` | `1h 1m 0s` |
| `86459999` | `1d 1m 0.00s` | `1d 1m 0s` |
The root `vitest.config.ts` uses default include globs, so `test/*.test.ts` runs and these assertions fail, breaking CI. (I couldn't run vitest directly in the sandbox because dev deps weren't installed / `vitest/config` unresolved, so I reproduced the exact function logic in a standalone Node script to confirm the outputs.)
## Fix
Updated the stale assertions in `test/format-duration-precise.test.ts` to the trimmed-zero outputs, and adjusted the file-level doc comment (which referenced `"1m 0.00s"` / `"60.00s"`) to describe the current behavior.
Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
Co-authored-by: mitul-s <mitulxshah@gmail.com>
@mitul-s
mitul-s merged commit 8a76688 into mainJul 6, 2026
59 checks passed
@mitul-s
mitul-s deleted the ms/timing-markers branch July 6, 2026 22:27
@github-actions

Copy link
Copy Markdown
Contributor

No backport to stable for 8a76688 (AI decision).

This commit builds entirely on main-only functionality: the formatDurationPrecise function does not exist anywhere on stable, the packages/web-shared/src/components/new-trace-viewer/ directory is absent on stable, and the touched test/format-duration-precise.test.ts file is not present on stable either. There is no corresponding code on stable to apply this fix to, so a backport would be meaningless and would not cleanly cherry-pick.

To override, re-run the Backport to stable workflow manually via workflow_dispatch and paste this commit SHA into the ref input:

8a766884cf5df20872b6a516008f854f407fe259

Sign up for freeto 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.

2 participants

@mitul-s@karthikscale3
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

change timing markers to be precise on the timeline - #2775

Merged
mitul-s merged 3 commits into
mainfrom
ms/timing-markers
Jul 6, 2026
Merged

change timing markers to be precise on the timeline #2775
mitul-s merged 3 commits into
mainfrom
ms/timing-markers

Conversation

@mitul-s

@mitul-smitul-s commented Jul 4, 2026

Copy link
Copy Markdown
Contributor

What

Makes the timing labels on the trace viewer timeline precise when zoomed in.

When the timeline is zoomed in far enough that the ruler's tick step drops below one second, the tick labels were formatted with whole-second precision. This produced duplicate, imprecise labels — e.g. a ~3s window with a 500ms step rendered 0s, 1s, 1s, 2s, 2s, 3s instead of distinct values. This PR scales each label's decimal precision to the tick step so every tick reads accurately.

Changes

  • computeTimeMarkers (new-trace-viewer/utils.ts) — derive fractionDigits from the tick interval. Steps >= 1s keep clean whole-second labels; sub-second steps use enough decimals to stay distinct (e.g. 500ms, 1.5s, 2.5s).
  • formatDurationPrecise (lib/utils.ts)
    • Added an optional fractionDigits argument (default 2) that controls both the number of decimals and the rounding granularity.
    • Trailing zeros are now trimmed, so 2.00s2s and 1.50s1.5s, while sub-second detail is preserved (1626ms1.63s, never 2s).
    • Dropped the fixed two-digit Intl.NumberFormat helper in favor of toFixed(fractionDigits).
  • Timeline gap labels & hover cursor label — switched from formatDuration to formatDurationPrecise so gap durations and the hovered-time indicator show the same precise values.

Tests

  • Added computeTimeMarkers tests covering sub-second, whole-second, and millisecond-zoom windows, asserting labels are distinct.
  • Added formatDurationPrecise tests for millisecond values, sub-second precision, trailing-zero trimming, the custom fractionDigits argument, and minute-plus decomposition.

Changeset

Patch release for @workflow/web-shared.

@mitul-s
mitul-s requested review from a team and ijjk as code ownersJuly 4, 2026 22:02
@changeset-bot

changeset-botBot commented Jul 4, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 53f0baf

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 16 packages
NameType
@workflow/web-sharedPatch
@workflow/webPatch
@workflow/cliPatch
@workflow/nitroPatch
workflowPatch
@workflow/world-testingPatch
@workflow/nuxtPatch
@workflow/corePatch
@workflow/buildersPatch
@workflow/nextPatch
@workflow/vitestPatch
@workflow/astroPatch
@workflow/nestPatch
@workflow/rollupPatch
@workflow/sveltekitPatch
@workflow/vitePatch

Not sure what this means? Click here to learn what changesets are.

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

@vercel

vercelBot commented Jul 4, 2026

Copy link
Copy Markdown
Contributor

@vercelvercelBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Additional Suggestion:

Old test file test/format-duration-precise.test.ts still asserts two-decimal output ("45.20s", "1m 0.00s") that no longer matches the trimmed-zero output of formatDurationPrecise, so pnpm test/CI fails.

Fix on Vercel

mitul-sand others added 2 commits July 6, 2026 17:39
…ts two-decimal output ("45.20s", "1m 0.00s") that no longer matches the trimmed-zero output of `formatDurationPrecise`, so `pnpm test`/CI fails.
This commit fixes the issue reported at packages/web-shared/test/format-duration-precise.test.ts:15
## Bug
The PR changed `formatDurationPrecise` (in `packages/web-shared/src/lib/utils.ts`) to trim trailing zeros by wrapping the fractional value in `Number(x.toFixed(fractionDigits))`:
```ts
if (normalizedMs < MS_IN_MINUTE) {
return `${Number((normalizedMs / MS_IN_SECOND).toFixed(fractionDigits))}s`;
}
...
parts.push(`${Number(seconds.toFixed(fractionDigits))}s`);
```
`Number("45.20")` → `45.2`, `Number("0.00")` → `0`, so whole/half seconds now render without padding.
A new test file `packages/web-shared/src/lib/utils.test.ts` reflects this behavior, but the pre-existing `packages/web-shared/test/format-duration-precise.test.ts` was left untouched and still asserts the **old** padded output.
## Concrete trigger
Reproduced the actual function output (integer decomposition + trimmed zeros):
| Input | Old assertion | New actual output |
|-------|---------------|-------------------|
| `45200` | `45.20s` | `45.2s` |
| `999.6` | `1.00s` | `1s` |
| `999.5` | `1.00s` | `1s` |
| `59999` | `1m 0.00s` | `1m 0s` |
| `59995` | `1m 0.00s` | `1m 0s` |
| `119999` | `2m 0.00s` | `2m 0s` |
| `3659999` | `1h 1m 0.00s` | `1h 1m 0s` |
| `86459999` | `1d 1m 0.00s` | `1d 1m 0s` |
The root `vitest.config.ts` uses default include globs, so `test/*.test.ts` runs and these assertions fail, breaking CI. (I couldn't run vitest directly in the sandbox because dev deps weren't installed / `vitest/config` unresolved, so I reproduced the exact function logic in a standalone Node script to confirm the outputs.)
## Fix
Updated the stale assertions in `test/format-duration-precise.test.ts` to the trimmed-zero outputs, and adjusted the file-level doc comment (which referenced `"1m 0.00s"` / `"60.00s"`) to describe the current behavior.
Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
Co-authored-by: mitul-s <mitulxshah@gmail.com>
@mitul-s
mitul-s merged commit 8a76688 into mainJul 6, 2026
59 checks passed
@mitul-s
mitul-s deleted the ms/timing-markers branch July 6, 2026 22:27
@github-actions

Copy link
Copy Markdown
Contributor

No backport to stable for 8a76688 (AI decision).

This commit builds entirely on main-only functionality: the formatDurationPrecise function does not exist anywhere on stable, the packages/web-shared/src/components/new-trace-viewer/ directory is absent on stable, and the touched test/format-duration-precise.test.ts file is not present on stable either. There is no corresponding code on stable to apply this fix to, so a backport would be meaningless and would not cleanly cherry-pick.

To override, re-run the Backport to stable workflow manually via workflow_dispatch and paste this commit SHA into the ref input:

8a766884cf5df20872b6a516008f854f407fe259

Sign up for freeto 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.

2 participants

@mitul-s@karthikscale3
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content

change timing markers to be precise on the timeline - #2775

Merged
mitul-s merged 3 commits into
mainfrom
ms/timing-markers
Jul 6, 2026
Merged

change timing markers to be precise on the timeline #2775
mitul-s merged 3 commits into
mainfrom
ms/timing-markers

Conversation

@mitul-s

@mitul-smitul-s commented Jul 4, 2026

Copy link
Copy Markdown
Contributor

What

Makes the timing labels on the trace viewer timeline precise when zoomed in.

When the timeline is zoomed in far enough that the ruler's tick step drops below one second, the tick labels were formatted with whole-second precision. This produced duplicate, imprecise labels — e.g. a ~3s window with a 500ms step rendered 0s, 1s, 1s, 2s, 2s, 3s instead of distinct values. This PR scales each label's decimal precision to the tick step so every tick reads accurately.

Changes

  • computeTimeMarkers (new-trace-viewer/utils.ts) — derive fractionDigits from the tick interval. Steps >= 1s keep clean whole-second labels; sub-second steps use enough decimals to stay distinct (e.g. 500ms, 1.5s, 2.5s).
  • formatDurationPrecise (lib/utils.ts)
    • Added an optional fractionDigits argument (default 2) that controls both the number of decimals and the rounding granularity.
    • Trailing zeros are now trimmed, so 2.00s2s and 1.50s1.5s, while sub-second detail is preserved (1626ms1.63s, never 2s).
    • Dropped the fixed two-digit Intl.NumberFormat helper in favor of toFixed(fractionDigits).
  • Timeline gap labels & hover cursor label — switched from formatDuration to formatDurationPrecise so gap durations and the hovered-time indicator show the same precise values.

Tests

  • Added computeTimeMarkers tests covering sub-second, whole-second, and millisecond-zoom windows, asserting labels are distinct.
  • Added formatDurationPrecise tests for millisecond values, sub-second precision, trailing-zero trimming, the custom fractionDigits argument, and minute-plus decomposition.

Changeset

Patch release for @workflow/web-shared.

@mitul-s
mitul-s requested review from a team and ijjk as code ownersJuly 4, 2026 22:02
@changeset-bot

changeset-botBot commented Jul 4, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 53f0baf

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 16 packages
NameType
@workflow/web-sharedPatch
@workflow/webPatch
@workflow/cliPatch
@workflow/nitroPatch
workflowPatch
@workflow/world-testingPatch
@workflow/nuxtPatch
@workflow/corePatch
@workflow/buildersPatch
@workflow/nextPatch
@workflow/vitestPatch
@workflow/astroPatch
@workflow/nestPatch
@workflow/rollupPatch
@workflow/sveltekitPatch
@workflow/vitePatch

Not sure what this means? Click here to learn what changesets are.

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

@vercel

vercelBot commented Jul 4, 2026

Copy link
Copy Markdown
Contributor

@vercelvercelBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Additional Suggestion:

Old test file test/format-duration-precise.test.ts still asserts two-decimal output ("45.20s", "1m 0.00s") that no longer matches the trimmed-zero output of formatDurationPrecise, so pnpm test/CI fails.

Fix on Vercel

mitul-sand others added 2 commits July 6, 2026 17:39
…ts two-decimal output ("45.20s", "1m 0.00s") that no longer matches the trimmed-zero output of `formatDurationPrecise`, so `pnpm test`/CI fails.
This commit fixes the issue reported at packages/web-shared/test/format-duration-precise.test.ts:15
## Bug
The PR changed `formatDurationPrecise` (in `packages/web-shared/src/lib/utils.ts`) to trim trailing zeros by wrapping the fractional value in `Number(x.toFixed(fractionDigits))`:
```ts
if (normalizedMs < MS_IN_MINUTE) {
return `${Number((normalizedMs / MS_IN_SECOND).toFixed(fractionDigits))}s`;
}
...
parts.push(`${Number(seconds.toFixed(fractionDigits))}s`);
```
`Number("45.20")` → `45.2`, `Number("0.00")` → `0`, so whole/half seconds now render without padding.
A new test file `packages/web-shared/src/lib/utils.test.ts` reflects this behavior, but the pre-existing `packages/web-shared/test/format-duration-precise.test.ts` was left untouched and still asserts the **old** padded output.
## Concrete trigger
Reproduced the actual function output (integer decomposition + trimmed zeros):
| Input | Old assertion | New actual output |
|-------|---------------|-------------------|
| `45200` | `45.20s` | `45.2s` |
| `999.6` | `1.00s` | `1s` |
| `999.5` | `1.00s` | `1s` |
| `59999` | `1m 0.00s` | `1m 0s` |
| `59995` | `1m 0.00s` | `1m 0s` |
| `119999` | `2m 0.00s` | `2m 0s` |
| `3659999` | `1h 1m 0.00s` | `1h 1m 0s` |
| `86459999` | `1d 1m 0.00s` | `1d 1m 0s` |
The root `vitest.config.ts` uses default include globs, so `test/*.test.ts` runs and these assertions fail, breaking CI. (I couldn't run vitest directly in the sandbox because dev deps weren't installed / `vitest/config` unresolved, so I reproduced the exact function logic in a standalone Node script to confirm the outputs.)
## Fix
Updated the stale assertions in `test/format-duration-precise.test.ts` to the trimmed-zero outputs, and adjusted the file-level doc comment (which referenced `"1m 0.00s"` / `"60.00s"`) to describe the current behavior.
Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
Co-authored-by: mitul-s <mitulxshah@gmail.com>
@mitul-s
mitul-s merged commit 8a76688 into mainJul 6, 2026
59 checks passed
@mitul-s
mitul-s deleted the ms/timing-markers branch July 6, 2026 22:27
@github-actions

Copy link
Copy Markdown
Contributor

No backport to stable for 8a76688 (AI decision).

This commit builds entirely on main-only functionality: the formatDurationPrecise function does not exist anywhere on stable, the packages/web-shared/src/components/new-trace-viewer/ directory is absent on stable, and the touched test/format-duration-precise.test.ts file is not present on stable either. There is no corresponding code on stable to apply this fix to, so a backport would be meaningless and would not cleanly cherry-pick.

To override, re-run the Backport to stable workflow manually via workflow_dispatch and paste this commit SHA into the ref input:

8a766884cf5df20872b6a516008f854f407fe259

Sign up for freeto 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.

2 participants

@mitul-s@karthikscale3
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

change timing markers to be precise on the timeline - #2775

Merged
mitul-s merged 3 commits into
mainfrom
ms/timing-markers
Jul 6, 2026
Merged

change timing markers to be precise on the timeline #2775
mitul-s merged 3 commits into
mainfrom
ms/timing-markers

Conversation

@mitul-s

@mitul-smitul-s commented Jul 4, 2026

Copy link
Copy Markdown
Contributor

What

Makes the timing labels on the trace viewer timeline precise when zoomed in.

When the timeline is zoomed in far enough that the ruler's tick step drops below one second, the tick labels were formatted with whole-second precision. This produced duplicate, imprecise labels — e.g. a ~3s window with a 500ms step rendered 0s, 1s, 1s, 2s, 2s, 3s instead of distinct values. This PR scales each label's decimal precision to the tick step so every tick reads accurately.

Changes

  • computeTimeMarkers (new-trace-viewer/utils.ts) — derive fractionDigits from the tick interval. Steps >= 1s keep clean whole-second labels; sub-second steps use enough decimals to stay distinct (e.g. 500ms, 1.5s, 2.5s).
  • formatDurationPrecise (lib/utils.ts)
    • Added an optional fractionDigits argument (default 2) that controls both the number of decimals and the rounding granularity.
    • Trailing zeros are now trimmed, so 2.00s2s and 1.50s1.5s, while sub-second detail is preserved (1626ms1.63s, never 2s).
    • Dropped the fixed two-digit Intl.NumberFormat helper in favor of toFixed(fractionDigits).
  • Timeline gap labels & hover cursor label — switched from formatDuration to formatDurationPrecise so gap durations and the hovered-time indicator show the same precise values.

Tests

  • Added computeTimeMarkers tests covering sub-second, whole-second, and millisecond-zoom windows, asserting labels are distinct.
  • Added formatDurationPrecise tests for millisecond values, sub-second precision, trailing-zero trimming, the custom fractionDigits argument, and minute-plus decomposition.

Changeset

Patch release for @workflow/web-shared.

@mitul-s
mitul-s requested review from a team and ijjk as code ownersJuly 4, 2026 22:02
@changeset-bot

changeset-botBot commented Jul 4, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 53f0baf

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 16 packages
NameType
@workflow/web-sharedPatch
@workflow/webPatch
@workflow/cliPatch
@workflow/nitroPatch
workflowPatch
@workflow/world-testingPatch
@workflow/nuxtPatch
@workflow/corePatch
@workflow/buildersPatch
@workflow/nextPatch
@workflow/vitestPatch
@workflow/astroPatch
@workflow/nestPatch
@workflow/rollupPatch
@workflow/sveltekitPatch
@workflow/vitePatch

Not sure what this means? Click here to learn what changesets are.

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

@vercel

vercelBot commented Jul 4, 2026

Copy link
Copy Markdown
Contributor

@vercelvercelBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Additional Suggestion:

Old test file test/format-duration-precise.test.ts still asserts two-decimal output ("45.20s", "1m 0.00s") that no longer matches the trimmed-zero output of formatDurationPrecise, so pnpm test/CI fails.

Fix on Vercel

mitul-sand others added 2 commits July 6, 2026 17:39
…ts two-decimal output ("45.20s", "1m 0.00s") that no longer matches the trimmed-zero output of `formatDurationPrecise`, so `pnpm test`/CI fails.
This commit fixes the issue reported at packages/web-shared/test/format-duration-precise.test.ts:15
## Bug
The PR changed `formatDurationPrecise` (in `packages/web-shared/src/lib/utils.ts`) to trim trailing zeros by wrapping the fractional value in `Number(x.toFixed(fractionDigits))`:
```ts
if (normalizedMs < MS_IN_MINUTE) {
return `${Number((normalizedMs / MS_IN_SECOND).toFixed(fractionDigits))}s`;
}
...
parts.push(`${Number(seconds.toFixed(fractionDigits))}s`);
```
`Number("45.20")` → `45.2`, `Number("0.00")` → `0`, so whole/half seconds now render without padding.
A new test file `packages/web-shared/src/lib/utils.test.ts` reflects this behavior, but the pre-existing `packages/web-shared/test/format-duration-precise.test.ts` was left untouched and still asserts the **old** padded output.
## Concrete trigger
Reproduced the actual function output (integer decomposition + trimmed zeros):
| Input | Old assertion | New actual output |
|-------|---------------|-------------------|
| `45200` | `45.20s` | `45.2s` |
| `999.6` | `1.00s` | `1s` |
| `999.5` | `1.00s` | `1s` |
| `59999` | `1m 0.00s` | `1m 0s` |
| `59995` | `1m 0.00s` | `1m 0s` |
| `119999` | `2m 0.00s` | `2m 0s` |
| `3659999` | `1h 1m 0.00s` | `1h 1m 0s` |
| `86459999` | `1d 1m 0.00s` | `1d 1m 0s` |
The root `vitest.config.ts` uses default include globs, so `test/*.test.ts` runs and these assertions fail, breaking CI. (I couldn't run vitest directly in the sandbox because dev deps weren't installed / `vitest/config` unresolved, so I reproduced the exact function logic in a standalone Node script to confirm the outputs.)
## Fix
Updated the stale assertions in `test/format-duration-precise.test.ts` to the trimmed-zero outputs, and adjusted the file-level doc comment (which referenced `"1m 0.00s"` / `"60.00s"`) to describe the current behavior.
Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
Co-authored-by: mitul-s <mitulxshah@gmail.com>
@mitul-s
mitul-s merged commit 8a76688 into mainJul 6, 2026
59 checks passed
@mitul-s
mitul-s deleted the ms/timing-markers branch July 6, 2026 22:27
@github-actions

Copy link
Copy Markdown
Contributor

No backport to stable for 8a76688 (AI decision).

This commit builds entirely on main-only functionality: the formatDurationPrecise function does not exist anywhere on stable, the packages/web-shared/src/components/new-trace-viewer/ directory is absent on stable, and the touched test/format-duration-precise.test.ts file is not present on stable either. There is no corresponding code on stable to apply this fix to, so a backport would be meaningless and would not cleanly cherry-pick.

To override, re-run the Backport to stable workflow manually via workflow_dispatch and paste this commit SHA into the ref input:

8a766884cf5df20872b6a516008f854f407fe259

Sign up for freeto 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.

2 participants

@mitul-s@karthikscale3
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

change timing markers to be precise on the timeline - #2775

Merged
mitul-s merged 3 commits into
mainfrom
ms/timing-markers
Jul 6, 2026
Merged

change timing markers to be precise on the timeline #2775
mitul-s merged 3 commits into
mainfrom
ms/timing-markers

Conversation

@mitul-s

@mitul-smitul-s commented Jul 4, 2026

Copy link
Copy Markdown
Contributor

What

Makes the timing labels on the trace viewer timeline precise when zoomed in.

When the timeline is zoomed in far enough that the ruler's tick step drops below one second, the tick labels were formatted with whole-second precision. This produced duplicate, imprecise labels — e.g. a ~3s window with a 500ms step rendered 0s, 1s, 1s, 2s, 2s, 3s instead of distinct values. This PR scales each label's decimal precision to the tick step so every tick reads accurately.

Changes

  • computeTimeMarkers (new-trace-viewer/utils.ts) — derive fractionDigits from the tick interval. Steps >= 1s keep clean whole-second labels; sub-second steps use enough decimals to stay distinct (e.g. 500ms, 1.5s, 2.5s).
  • formatDurationPrecise (lib/utils.ts)
    • Added an optional fractionDigits argument (default 2) that controls both the number of decimals and the rounding granularity.
    • Trailing zeros are now trimmed, so 2.00s2s and 1.50s1.5s, while sub-second detail is preserved (1626ms1.63s, never 2s).
    • Dropped the fixed two-digit Intl.NumberFormat helper in favor of toFixed(fractionDigits).
  • Timeline gap labels & hover cursor label — switched from formatDuration to formatDurationPrecise so gap durations and the hovered-time indicator show the same precise values.

Tests

  • Added computeTimeMarkers tests covering sub-second, whole-second, and millisecond-zoom windows, asserting labels are distinct.
  • Added formatDurationPrecise tests for millisecond values, sub-second precision, trailing-zero trimming, the custom fractionDigits argument, and minute-plus decomposition.

Changeset

Patch release for @workflow/web-shared.

@mitul-s
mitul-s requested review from a team and ijjk as code ownersJuly 4, 2026 22:02
@changeset-bot

changeset-botBot commented Jul 4, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 53f0baf

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 16 packages
NameType
@workflow/web-sharedPatch
@workflow/webPatch
@workflow/cliPatch
@workflow/nitroPatch
workflowPatch
@workflow/world-testingPatch
@workflow/nuxtPatch
@workflow/corePatch
@workflow/buildersPatch
@workflow/nextPatch
@workflow/vitestPatch
@workflow/astroPatch
@workflow/nestPatch
@workflow/rollupPatch
@workflow/sveltekitPatch
@workflow/vitePatch

Not sure what this means? Click here to learn what changesets are.

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

@vercel

vercelBot commented Jul 4, 2026

Copy link
Copy Markdown
Contributor

@vercelvercelBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Additional Suggestion:

Old test file test/format-duration-precise.test.ts still asserts two-decimal output ("45.20s", "1m 0.00s") that no longer matches the trimmed-zero output of formatDurationPrecise, so pnpm test/CI fails.

Fix on Vercel

mitul-sand others added 2 commits July 6, 2026 17:39
…ts two-decimal output ("45.20s", "1m 0.00s") that no longer matches the trimmed-zero output of `formatDurationPrecise`, so `pnpm test`/CI fails.
This commit fixes the issue reported at packages/web-shared/test/format-duration-precise.test.ts:15
## Bug
The PR changed `formatDurationPrecise` (in `packages/web-shared/src/lib/utils.ts`) to trim trailing zeros by wrapping the fractional value in `Number(x.toFixed(fractionDigits))`:
```ts
if (normalizedMs < MS_IN_MINUTE) {
return `${Number((normalizedMs / MS_IN_SECOND).toFixed(fractionDigits))}s`;
}
...
parts.push(`${Number(seconds.toFixed(fractionDigits))}s`);
```
`Number("45.20")` → `45.2`, `Number("0.00")` → `0`, so whole/half seconds now render without padding.
A new test file `packages/web-shared/src/lib/utils.test.ts` reflects this behavior, but the pre-existing `packages/web-shared/test/format-duration-precise.test.ts` was left untouched and still asserts the **old** padded output.
## Concrete trigger
Reproduced the actual function output (integer decomposition + trimmed zeros):
| Input | Old assertion | New actual output |
|-------|---------------|-------------------|
| `45200` | `45.20s` | `45.2s` |
| `999.6` | `1.00s` | `1s` |
| `999.5` | `1.00s` | `1s` |
| `59999` | `1m 0.00s` | `1m 0s` |
| `59995` | `1m 0.00s` | `1m 0s` |
| `119999` | `2m 0.00s` | `2m 0s` |
| `3659999` | `1h 1m 0.00s` | `1h 1m 0s` |
| `86459999` | `1d 1m 0.00s` | `1d 1m 0s` |
The root `vitest.config.ts` uses default include globs, so `test/*.test.ts` runs and these assertions fail, breaking CI. (I couldn't run vitest directly in the sandbox because dev deps weren't installed / `vitest/config` unresolved, so I reproduced the exact function logic in a standalone Node script to confirm the outputs.)
## Fix
Updated the stale assertions in `test/format-duration-precise.test.ts` to the trimmed-zero outputs, and adjusted the file-level doc comment (which referenced `"1m 0.00s"` / `"60.00s"`) to describe the current behavior.
Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
Co-authored-by: mitul-s <mitulxshah@gmail.com>
@mitul-s
mitul-s merged commit 8a76688 into mainJul 6, 2026
59 checks passed
@mitul-s
mitul-s deleted the ms/timing-markers branch July 6, 2026 22:27
@github-actions

Copy link
Copy Markdown
Contributor

No backport to stable for 8a76688 (AI decision).

This commit builds entirely on main-only functionality: the formatDurationPrecise function does not exist anywhere on stable, the packages/web-shared/src/components/new-trace-viewer/ directory is absent on stable, and the touched test/format-duration-precise.test.ts file is not present on stable either. There is no corresponding code on stable to apply this fix to, so a backport would be meaningless and would not cleanly cherry-pick.

To override, re-run the Backport to stable workflow manually via workflow_dispatch and paste this commit SHA into the ref input:

8a766884cf5df20872b6a516008f854f407fe259

Sign up for freeto 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.

2 participants

@mitul-s@karthikscale3
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content

change timing markers to be precise on the timeline - #2775

Merged
mitul-s merged 3 commits into
mainfrom
ms/timing-markers
Jul 6, 2026
Merged

change timing markers to be precise on the timeline #2775
mitul-s merged 3 commits into
mainfrom
ms/timing-markers

Conversation

@mitul-s

@mitul-smitul-s commented Jul 4, 2026

Copy link
Copy Markdown
Contributor

What

Makes the timing labels on the trace viewer timeline precise when zoomed in.

When the timeline is zoomed in far enough that the ruler's tick step drops below one second, the tick labels were formatted with whole-second precision. This produced duplicate, imprecise labels — e.g. a ~3s window with a 500ms step rendered 0s, 1s, 1s, 2s, 2s, 3s instead of distinct values. This PR scales each label's decimal precision to the tick step so every tick reads accurately.

Changes

  • computeTimeMarkers (new-trace-viewer/utils.ts) — derive fractionDigits from the tick interval. Steps >= 1s keep clean whole-second labels; sub-second steps use enough decimals to stay distinct (e.g. 500ms, 1.5s, 2.5s).
  • formatDurationPrecise (lib/utils.ts)
    • Added an optional fractionDigits argument (default 2) that controls both the number of decimals and the rounding granularity.
    • Trailing zeros are now trimmed, so 2.00s2s and 1.50s1.5s, while sub-second detail is preserved (1626ms1.63s, never 2s).
    • Dropped the fixed two-digit Intl.NumberFormat helper in favor of toFixed(fractionDigits).
  • Timeline gap labels & hover cursor label — switched from formatDuration to formatDurationPrecise so gap durations and the hovered-time indicator show the same precise values.

Tests

  • Added computeTimeMarkers tests covering sub-second, whole-second, and millisecond-zoom windows, asserting labels are distinct.
  • Added formatDurationPrecise tests for millisecond values, sub-second precision, trailing-zero trimming, the custom fractionDigits argument, and minute-plus decomposition.

Changeset

Patch release for @workflow/web-shared.

@mitul-s
mitul-s requested review from a team and ijjk as code ownersJuly 4, 2026 22:02
@changeset-bot

changeset-botBot commented Jul 4, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 53f0baf

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 16 packages
NameType
@workflow/web-sharedPatch
@workflow/webPatch
@workflow/cliPatch
@workflow/nitroPatch
workflowPatch
@workflow/world-testingPatch
@workflow/nuxtPatch
@workflow/corePatch
@workflow/buildersPatch
@workflow/nextPatch
@workflow/vitestPatch
@workflow/astroPatch
@workflow/nestPatch
@workflow/rollupPatch
@workflow/sveltekitPatch
@workflow/vitePatch

Not sure what this means? Click here to learn what changesets are.

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

@vercel

vercelBot commented Jul 4, 2026

Copy link
Copy Markdown
Contributor

@vercelvercelBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Additional Suggestion:

Old test file test/format-duration-precise.test.ts still asserts two-decimal output ("45.20s", "1m 0.00s") that no longer matches the trimmed-zero output of formatDurationPrecise, so pnpm test/CI fails.

Fix on Vercel

mitul-sand others added 2 commits July 6, 2026 17:39
…ts two-decimal output ("45.20s", "1m 0.00s") that no longer matches the trimmed-zero output of `formatDurationPrecise`, so `pnpm test`/CI fails.
This commit fixes the issue reported at packages/web-shared/test/format-duration-precise.test.ts:15
## Bug
The PR changed `formatDurationPrecise` (in `packages/web-shared/src/lib/utils.ts`) to trim trailing zeros by wrapping the fractional value in `Number(x.toFixed(fractionDigits))`:
```ts
if (normalizedMs < MS_IN_MINUTE) {
return `${Number((normalizedMs / MS_IN_SECOND).toFixed(fractionDigits))}s`;
}
...
parts.push(`${Number(seconds.toFixed(fractionDigits))}s`);
```
`Number("45.20")` → `45.2`, `Number("0.00")` → `0`, so whole/half seconds now render without padding.
A new test file `packages/web-shared/src/lib/utils.test.ts` reflects this behavior, but the pre-existing `packages/web-shared/test/format-duration-precise.test.ts` was left untouched and still asserts the **old** padded output.
## Concrete trigger
Reproduced the actual function output (integer decomposition + trimmed zeros):
| Input | Old assertion | New actual output |
|-------|---------------|-------------------|
| `45200` | `45.20s` | `45.2s` |
| `999.6` | `1.00s` | `1s` |
| `999.5` | `1.00s` | `1s` |
| `59999` | `1m 0.00s` | `1m 0s` |
| `59995` | `1m 0.00s` | `1m 0s` |
| `119999` | `2m 0.00s` | `2m 0s` |
| `3659999` | `1h 1m 0.00s` | `1h 1m 0s` |
| `86459999` | `1d 1m 0.00s` | `1d 1m 0s` |
The root `vitest.config.ts` uses default include globs, so `test/*.test.ts` runs and these assertions fail, breaking CI. (I couldn't run vitest directly in the sandbox because dev deps weren't installed / `vitest/config` unresolved, so I reproduced the exact function logic in a standalone Node script to confirm the outputs.)
## Fix
Updated the stale assertions in `test/format-duration-precise.test.ts` to the trimmed-zero outputs, and adjusted the file-level doc comment (which referenced `"1m 0.00s"` / `"60.00s"`) to describe the current behavior.
Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
Co-authored-by: mitul-s <mitulxshah@gmail.com>
@mitul-s
mitul-s merged commit 8a76688 into mainJul 6, 2026
59 checks passed
@mitul-s
mitul-s deleted the ms/timing-markers branch July 6, 2026 22:27
@github-actions

Copy link
Copy Markdown
Contributor

No backport to stable for 8a76688 (AI decision).

This commit builds entirely on main-only functionality: the formatDurationPrecise function does not exist anywhere on stable, the packages/web-shared/src/components/new-trace-viewer/ directory is absent on stable, and the touched test/format-duration-precise.test.ts file is not present on stable either. There is no corresponding code on stable to apply this fix to, so a backport would be meaningless and would not cleanly cherry-pick.

To override, re-run the Backport to stable workflow manually via workflow_dispatch and paste this commit SHA into the ref input:

8a766884cf5df20872b6a516008f854f407fe259

Sign up for freeto 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.

2 participants

@mitul-s@karthikscale3