Skip to content

feat(overview): merge the matrix footer into one bar and dim stale data in flight / 合并矩阵页脚为单栏并在加载中淡化旧数据 - #744

Merged
edwingao28 merged 2 commits into
chun/inferencex-app_overviewfrom
wenyaogao/pr719-ui-polish
Aug 14, 2026
Merged

feat(overview): merge the matrix footer into one bar and dim stale data in flight / 合并矩阵页脚为单栏并在加载中淡化旧数据#744
edwingao28 merged 2 commits into
chun/inferencex-app_overviewfrom
wenyaogao/pr719-ui-polish

Conversation

@edwingao28

@edwingao28 edwingao28 commented Aug 14, 2026

Copy link
Copy Markdown
Collaborator

Stacked on #719 — UI/UX polish only, no behavior change to its features.

Summary

  • One footer bar instead of three stacked link rows. The methodology notes keep the card's left edge and the two scope filters ride the right as chips with count badges ("Hide blanks ④" / "Show inactive"). The full counted sentences stay on the accessible name and hover title. The card ends on a single rule, returning ~90px to the matrix on a laptop viewport.
  • Balanced control strip. The on-page strip now uses the same three-column skeleton as the presenting toolbar: view tabs stay centred on the matrix, and Present — now carrying an expand glyph, Exit a collapse glyph — anchors the right edge as an action instead of trailing the tabs like a third view.
  • Page and presentation states share one chip style. The footer chips are the same control the deck toolbar already showed, so entering Present no longer restyles the filters (the badge is dropped there, where it would be noise at projection size).
  • In-flight feedback. OverviewNavigationProvider exposes pending; a fetch still unresolved after 150ms dims the stale matrix to 60% opacity. Cache hits and fast responses stay under the delay and never flicker. The URL-driven server filtering, hover prefetch and client cache are untouched.

Test plan

中文说明

基于 #719 的增量 PR——仅打磨 UI/UX,不改变其功能行为。

  • 底部三条堆叠链接行合并为单条页脚栏。 方法学注释保持左侧,两个范围过滤器以带计数徽标的 chip 形式靠右("隐藏空行 ④"/"显示停用模型")。带计数的完整句子保留在无障碍名称与悬停提示中。卡片以单条分隔线收尾,在笔记本视口上为矩阵让出约 90px。
  • 控制条重新配平。 页面态控制条改用与演示态工具栏相同的三栏骨架:视图标签相对矩阵居中,Present(新增展开图标,Exit 为收起图标)右对齐为动作按钮,不再像第三个视图标签。
  • 页面态与演示态共用同一 chip 样式。 页脚 chip 即演示工具栏原有控件,进入演示不再改变过滤器外观(演示态省略徽标,投影尺寸下是噪声)。
  • 加载中反馈。 OverviewNavigationProvider 暴露 pending;请求超过 150ms 未返回时旧矩阵淡化至 60% 不透明度,缓存命中与快速响应不闪烁。URL 驱动的服务端过滤、悬停预取与客户端缓存均未改动。

Note

Low Risk
Client-side overview navigation and presentation UI only; no API or data-model changes, with tests for pending state and existing navigation race handling.

Overview
Overview UI polish on top of #719: layout and loading feedback, not new filtering behavior.

The matrix card footer is one bar—methodology notes on the left, row/model scope controls as chips with count badges on the right (full counted sentences on aria-label/title). Scope toggles use the same chip style in the footer and presentation toolbar; presentation drops the badge.

The control strip matches the presenting toolbar’s three-column layout: view tabs centered, Present (expand/collapse icons) anchored on the right.

OverviewNavigationProvider exposes pending; the matrix card dims to 60% opacity after a 150ms delay while a selector fetch is in flight, and clears on success or failure. Unit tests cover pending lifecycle; Cypress zh locale asserts the short chip label plus full aria-label.

Reviewed by Cursor Bugbot for commit 0385d4b. Bugbot is set up for automated code reviews on this repo. Configure here.

@edwingao28
edwingao28 requested a review from adibarra as a code owner August 14, 2026 21:01
@vercel

vercel Bot commented Aug 14, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
inferencemax-app Ready Ready Preview Aug 14, 2026 9:42pm

Request Review

@github-actions

github-actions Bot commented Aug 14, 2026

Copy link
Copy Markdown
Contributor

Claude finished @edwingao28's task in 5m 21s —— View job


Review: overview footer merge & in-flight dimming

🟢 LGTM — no blocking issues found.

  • Read the full diff against origin/chun/inferencex-app_overview
  • Static review of all 5 changed files
  • Runtime verification via Playwright
  • Checked CI status

I reviewed the code statically and verified it at runtime against the dev server.

Static review

  • overview-navigation.tsx — the new pending flag is correctly gated by navigationIdRef: a stale response that loses the navigationId race returns early in both .then and .catch, so it never clears pending for a newer navigation, and the latest navigation always settles it. No stuck-true path (the [initialData, initialHref] effect also resets it). pending is properly added to the useMemo deps.
  • overview-page.tsx / overview-scorecard.tsx — footer merge into a single bordered bar looks right; the border-t moved cleanly from each child <nav>/methodology block to the shared container. ScopeChipCount renders only for variant === 'section', so the badge is correctly dropped in the presenting toolbar. aria-label/title now carry the full counted sentence in both variants (matches the updated overview.cy.ts assertion).
  • The 150ms-delay opacity approach (delay-150 on the pending branch only) achieves the "no flicker under the threshold" intent purely in CSS.

Runtime verification (/overview?models=all&compare=30d)

  • ✅ Single footer bar: methodology left, Hide unchanged ⑨ + Hide inactive chips right.
  • ✅ Present mode: chips keep the same style and drop the count badge (Hide unchanged / Hide inactive, no 9); expand/collapse glyph on the toggle.
  • ✅ In-flight dimming: switching tiers sets data-pending="true" on the matrix card during the fetch and flips back to false + opacity-100 on resolve.
  • ✅ 0 console errors (the 2 left-pattern-full.svg preload warnings are pre-existing and unrelated).

CI: Claude (route), Vercel pass; tests-*/lint not yet reported at review time — assume the merge gate covers them.

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 63cca8f8ce

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

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

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

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread packages/app/src/components/overview/overview-page.tsx
@github-actions

github-actions Bot commented Aug 14, 2026

Copy link
Copy Markdown
Contributor

Claude finished @edwingao28's task in 1m 34s —— View job


Re-review: overview footer merge & in-flight dimming

🟢 LGTM — no blocking issues found. New commit 0385d4b resolves the one open review thread.

  • Read full diff vs origin/chun/inferencex-app_overview
  • Focus on new commit 0385d4b (pending lifecycle tests)
  • Static review of changed files
  • Runtime verification via Playwright
  • Check CI status

This re-review covers the delta since the prior LGTM on 63cca8f — i.e. commit 0385d4b, which adds the pending-lifecycle tests that address Codex's P1 (missing coverage for the dimming state).

New test commit (0385d4b)

  • overview-navigation.test.tsx — the two added cases correctly exercise the lifecycle the P1 asked for: a held-open fetch asserts pending flips true in flight, then clears on resolution (case 1) and on rejection (case 2 — the permanently-dimmed regression). The failure case also asserts data/tier stays on the prior selection (50), so the matrix isn't left dimmed over data it still shows. Solid coverage.
  • I agree with the author's reply that unit is the right layer here: the 150 ms threshold is a CSS delay-150, not JS state, so the timing itself isn't meaningfully assertable from Cypress any more precisely than from jsdom. What matters — the pending flag never sticking true — is what these tests pin.

Static review of the rest — consistent with the prior pass; nothing new to flag. The pending flag is still correctly guarded by the navigationId race in both .then/.catch (a stale response returns early and never clears a newer navigation's pending), and the [initialData, initialHref] effect resets it. pending is in the useMemo deps.

Runtime verification (/overview?models=all&compare=30d)

  • ✅ Single footer bar: border-t container with methodology left, scope chips right (overview-methodology and both toggles share one flex … border-t parent — no per-child rules).
  • ✅ Row-scope chip: Hide unchanged + badge 9, full sentence Hide 9 rows with no 30-day change on aria-label.
  • ✅ Model-scope chip: Hide inactive, full sentence Hide deprecated & maintenance-mode models on aria-label/title (matches the updated overview.cy.ts / zh assertion).
  • ✅ Matrix card: data-pending="false"opacity-100, transition-opacity duration-200 present for the dimming path.
  • ✅ 0 console errors (the SVG preload warnings are pre-existing and unrelated).

CI: typecheck/lint/test:unit and fixtures-e2e are covered by the dedicated tests-*/lint workflows (not re-run here). The only runs surfaced against this head are the Claude jobs; assume the merge gate covers the rest.

@edwingao28
edwingao28 merged commit a64befc into chun/inferencex-app_overview Aug 14, 2026
10 checks passed
@edwingao28
edwingao28 deleted the wenyaogao/pr719-ui-polish branch August 14, 2026 22:32
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.

1 participant