SCIX-813 feat(nav): add count badge to graphics menu item by thostetler · Pull Request #817 · adsabs/nectar

thostetler · 2026-03-02T21:15:16Z

Summary

Display figure count badge on the Graphics menu item in abstract side nav, matching the pattern used by Citations, References, Credits, and Mentions
Add staleTime: 5min to useGetGraphicsCount to reduce redundant refetches when navigating between abstract subpages
Fix MSW mock handler routing bug (':id' → '/:id')

codecov · 2026-03-02T21:20:07Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 62.0%. Comparing base (a7a0d97) to head (c8df743).

Additional details and impacted files

@@           Coverage Diff            @@
##           master    #817     +/-   ##
========================================
+ Coverage    62.0%   62.0%   +0.1%     
========================================
  Files         317     317             
  Lines       36521   36522      +1     
  Branches     1642    1638      -4     
========================================
+ Hits        22608   22619     +11     
+ Misses      13876   13866     -10     
  Partials       37      37

Files with missing lines	Coverage Δ
src/api/graphics/graphics.ts	`76.7% <100.0%> (+8.3%)`	⬆️
src/components/AbstractSideNav/AbstractSideNav.tsx	`95.9% <100.0%> (ø)`

... and 3 files with indirect coverage changes

🚀 New features to boost your workflow:

📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Also fix MSW graphics handler route (missing leading slash on :id param).

Graphics API can return http:// thumbnail URLs which next/image rejects as unconfigured. Rewrite to https:// at point of use.

Copilot

Pull request overview

Risk summary: Medium — user-facing navigation change is low risk, but the updated graphics count query can currently fire with an undefined bibcode, and the graphics page still links out to http:// URLs.

This PR adds a figure-count badge to the Abstract side navigation’s Graphics item (matching existing count-badge patterns), reduces redundant graphics-count refetching via React Query staleTime, and fixes an MSW handler route pattern for the graphics endpoint.

Changes:

Show a count badge for Graphics in the Abstract side nav and disable when count is 0.
Add staleTime: 5min to useGetGraphicsCount to reduce refetching while navigating.
Fix MSW graphics handler routing (':id' → '/:id') and add/extend a test to assert the badge appears.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
`src/components/AbstractSideNav/AbstractSideNav.tsx`	Adds `CountBadge` as `rightElement` for the Graphics nav item using `graphicsCount`.
`src/api/graphics/graphics.ts`	Adds a 5-minute `staleTime` for the graphics-count query.
`src/mocks/handlers/graphics.ts`	Fixes MSW route matching for the graphics endpoint by adding the missing `/`.
`src/components/__tests__/AbstractSideNav.test.tsx`	Adds a test that waits for and asserts the Graphics count badge.
`src/pages/abs/[id]/graphics.tsx`	Normalizes thumbnail URLs to `https://` when rendering `NextImage`.

Copilot · 2026-03-03T17:23:41Z

src/pages/abs/[id]/graphics.tsx

                      href={figure.images[0].highres}
                    >
-                      <NextImage src={figure.images[0].thumbnail} width="150" height="150" alt={figure.figure_label} />
+                      <NextImage
+                        src={figure.images[0].thumbnail.replace(/^http:\/\//, 'https://')}
+                        width="150"
+                        height="150"
+                        alt={figure.figure_label}


The thumbnail URL is normalized to HTTPS, but the click-through href still uses http:// (e.g., doi.org). This can trigger mixed-content/insecure navigation warnings from an HTTPS page and is inconsistent with the thumbnail fix. Consider normalizing figure.images[0].highres to HTTPS as well (or using a shared URL-normalization helper for both).

Copilot · 2026-03-03T17:23:42Z

src/api/graphics/graphics.ts

  const { data } = useQuery({
    queryKey: graphicsKeys.primary(bibcode),
    queryFn: fetchGraphics,
    retry: retryFn,
+    staleTime: 1000 * 60 * 5,
    meta: { params, skipGlobalErrorHandler: true },
    ...options,
  });


useGetGraphicsCount will execute a query even when bibcode is undefined (the type is optional), resulting in requests like /graphics/undefined and caching under a key with an undefined bibcode. Add an enabled: !!bibcode default (while still allowing callers to override via options) so the query is skipped until a valid bibcode is available.

Copilot · 2026-03-03T17:23:42Z

src/components/__tests__/AbstractSideNav.test.tsx

+  await waitFor(() => {
+    const graphicsText = screen.getAllByText('Graphics');
+    // Walk up to the nearest button/link container
+    const container = graphicsText[0].closest('a, button');
+    expect(container).toBeTruthy();
+    expect(container).toHaveTextContent('7');
+  });


This test assertion is fairly brittle: it relies on getAllByText('Graphics'), picks the first match, then walks up the DOM with closest('a, button'). This can become flaky if both the side + top nav render in the DOM or if the markup changes. Prefer querying the specific nav item by accessible role/name (e.g., a link/button named "Graphics") and then asserting the badge within that element (using Testing Library within), ideally with findBy... instead of wrapping synchronous queries in waitFor.

feat(nav): SCIX-813 add count badge to graphics menu item

22cad5a

thostetler added 2 commits March 2, 2026 16:28

perf(graphics): SCIX-813 add staleTime to graphics count query

c8bacd1

test(nav): SCIX-813 add test for graphics count badge

7220a63

Also fix MSW graphics handler route (missing leading slash on :id param).

thostetler force-pushed the feat/SCIX-813-graphics-menu-count branch from 796687e to 7220a63 Compare March 2, 2026 21:28

fix(graphics): rewrite http thumbnail URLs to https

c8df743

Graphics API can return http:// thumbnail URLs which next/image rejects as unconfigured. Rewrite to https:// at point of use.

thostetler marked this pull request as ready for review March 3, 2026 17:19

thostetler requested review from Copilot and shinyichen March 3, 2026 17:19

Copilot started reviewing on behalf of thostetler March 3, 2026 17:20 View session

Copilot AI reviewed Mar 3, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SCIX-813 feat(nav): add count badge to graphics menu item#817

SCIX-813 feat(nav): add count badge to graphics menu item#817
thostetler wants to merge 4 commits intoadsabs:masterfrom
thostetler:feat/SCIX-813-graphics-menu-count

thostetler commented Mar 2, 2026 •

edited

Loading

Uh oh!

codecov bot commented Mar 2, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 3, 2026

Uh oh!

Copilot AI Mar 3, 2026

Uh oh!

Copilot AI Mar 3, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

thostetler commented Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Uh oh!

codecov bot commented Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 3, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

thostetler commented Mar 2, 2026 •

edited

Loading

codecov bot commented Mar 2, 2026 •

edited

Loading