Skip to content

Analytics#29

Merged
bklaing2 merged 3 commits intomainfrom
analytics
Apr 1, 2026
Merged

Analytics#29
bklaing2 merged 3 commits intomainfrom
analytics

Conversation

@bklaing2
Copy link
Copy Markdown
Member

@bklaing2 bklaing2 commented Apr 1, 2026

Purpose

Adds Vercel analytics. Tracks events for global search, breadcrumbs, and filters

closes: https://github.com/datacite/product-backlog/issues/699

Approach

Open Questions and Pre-Merge TODOs

Learning

Types of changes

  • Bug fix (non-breaking change which fixes an issue)

  • New feature (non-breaking change which adds functionality)

  • Breaking change (fix or feature that would cause existing functionality to change)

Reviewer, please remember our guidelines:

  • Be humble in the language and feedback you give, ask don't tell.
  • Consider using positive language as opposed to neutral when offering feedback. This is to avoid the negative bias that can occur with neutral language appearing negative.
  • Offer suggestions on how to improve code e.g. simplification or expanding clarity.
  • Ensure you give reasons for the changes you are proposing.

Summary by CodeRabbit

  • New Features
    • App-wide analytics added and enabled at the application root.
    • Tracks entity/result clicks and breadcrumb interactions.
    • Tracks filter usage (registration year, resource type) and query submissions.
    • Tracks global search/result clicks and other navigation interactions.

@bklaing2 bklaing2 requested a review from codycooperross April 1, 2026 14:08
@bklaing2 bklaing2 self-assigned this Apr 1, 2026
@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Apr 1, 2026

📝 Walkthrough

Walkthrough

Added @vercel/analytics dependency, rendered the Analytics component in the root layout, and instrumented several UI interactions with track() calls across components to emit analytics events for entity clicks, filters, breadcrumbs, and query submissions.

Changes

Cohort / File(s) Summary
Dependency
package.json
Added @vercel/analytics@^2.0.1 to runtime dependencies.
Root layout
src/app/layout.tsx
Imported and rendered Analytics from @vercel/analytics/next inside RootLayout; removed an extra trailing text node after a Script.
Entity list interaction
src/app/DisplayEntities.tsx
Imported track and added an onClick handler on entity items to emit track("global search", { on: "result", action: "clicked" }).
Filter controls
src/components/ActionButtons.tsx
Imported track; replaced inline item click handlers with a shared onItemClick that calls track("filters", ...) and closes comboboxes; added trackQuery to emit track("filters", { on: "query", action: "submitted" }) on query submit and wired it to the query button/link.
Breadcrumbs & dropdowns
src/components/Breadcrumbs.tsx
Imported track; added track("breadcrumbs", ...) on breadcrumb interactions and sibling dropdown item clicks; replaced inline onMouseDown stop-propagation with a handler that also emits analytics.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
Title check ❓ Inconclusive The title 'Analytics' is vague and does not clearly convey the specific changes made—it only indicates the general category/feature being added without describing what was actually implemented. Consider using a more descriptive title such as 'Add Vercel analytics tracking for search, filters, and breadcrumbs' to clearly communicate the scope and intent of the changes.
✅ Passed checks (1 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch analytics

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
src/components/Breadcrumbs.tsx (1)

90-104: ⚠️ Potential issue | 🟠 Major

Move breadcrumb tracking from onMouseDown to onClick.

Line 103 binds tracking to onMouseDown, which records incomplete pointer interactions and misses keyboard activations (e.g., Enter key).

🔧 Proposed fix
  function onClick(e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
+    e.stopPropagation();
+  }
+
+  function onClickTrack() {
     track("breadcrumbs", { on: "breadcrumb item", action: "entity clicked" });
-    e.stopPropagation();
   }

   const BreadcrumbPageLink = (wrapperProps: { children: ReactNode }) =>
     props.entity.id === props.active.id ? (
       <BreadcrumbPage {...wrapperProps} className={className} />
     ) : (
       <BreadcrumbLink
         {...wrapperProps}
         href={`/${props.entity.id}`}
         className={className}
         onMouseDown={onClick}
+        onClick={onClickTrack}
       />
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/components/Breadcrumbs.tsx` around lines 90 - 104, The breadcrumb
tracking is currently wired to onMouseDown on the BreadcrumbLink which misses
keyboard activations; move the tracking call into the onClick handler and attach
that onClick to BreadcrumbLink (remove the onMouseDown prop). Specifically,
update the onClick function (where track(...) and e.stopPropagation() live) to
be used by BreadcrumbLink in BreadcrumbPageLink instead of binding onMouseDown,
ensuring you still call track(...) and e.stopPropagation() when props.entity.id
!== props.active.id.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/ActionButtons.tsx`:
- Around line 225-230: The onKeyDown handler currently submits on Enter
regardless of input state; update the onKeyDown(KeyboardEvent<HTMLInputElement>)
function to first check the same condition the button uses (e.g., !disabled and
query.trim().length > 0 or the component's isDisabled flag) and only then call
trackQuery() and router.push(href); ensure you mirror the exact validation used
by the submit button so Enter does nothing for empty/whitespace inputs.

---

Outside diff comments:
In `@src/components/Breadcrumbs.tsx`:
- Around line 90-104: The breadcrumb tracking is currently wired to onMouseDown
on the BreadcrumbLink which misses keyboard activations; move the tracking call
into the onClick handler and attach that onClick to BreadcrumbLink (remove the
onMouseDown prop). Specifically, update the onClick function (where track(...)
and e.stopPropagation() live) to be used by BreadcrumbLink in BreadcrumbPageLink
instead of binding onMouseDown, ensuring you still call track(...) and
e.stopPropagation() when props.entity.id !== props.active.id.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 5c149c3d-edee-42d1-8e28-cbba774a706f

📥 Commits

Reviewing files that changed from the base of the PR and between e963380 and a0e9591.

⛔ Files ignored due to path filters (1)
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (5)
  • package.json
  • src/app/DisplayEntities.tsx
  • src/app/layout.tsx
  • src/components/ActionButtons.tsx
  • src/components/Breadcrumbs.tsx

Comment on lines 225 to 230
function onKeyDown(e: KeyboardEvent<HTMLInputElement>) {
if (e.key === "Enter") {
e.preventDefault();
trackQuery();
router.push(href);
}
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Verify Enter path currently lacks disabled guard in this handler.
rg -n -C3 'const disabled|function onKeyDown|if \(e.key === "Enter"\)|trackQuery\(\)|router.push\(href\)' src/components/ActionButtons.tsx

Repository: datacite/puli

Length of output: 549


Guard Enter handling when query is empty.

The onKeyDown handler at line 226 submits on Enter regardless of the disabled state, allowing empty or whitespace-only input to trigger "query submitted" tracking and navigation, while the button itself prevents this via the disabled prop.

🔧 Proposed fix
 function onKeyDown(e: KeyboardEvent<HTMLInputElement>) {
-  if (e.key === "Enter") {
-    e.preventDefault();
-    trackQuery();
-    router.push(href);
-  }
+  if (e.key !== "Enter" || disabled) return;
+  e.preventDefault();
+  trackQuery();
+  router.push(href);
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
function onKeyDown(e: KeyboardEvent<HTMLInputElement>) {
if (e.key === "Enter") {
e.preventDefault();
trackQuery();
router.push(href);
}
function onKeyDown(e: KeyboardEvent<HTMLInputElement>) {
if (e.key !== "Enter" || disabled) return;
e.preventDefault();
trackQuery();
router.push(href);
}
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/components/ActionButtons.tsx` around lines 225 - 230, The onKeyDown
handler currently submits on Enter regardless of input state; update the
onKeyDown(KeyboardEvent<HTMLInputElement>) function to first check the same
condition the button uses (e.g., !disabled and query.trim().length > 0 or the
component's isDisabled flag) and only then call trackQuery() and
router.push(href); ensure you mirror the exact validation used by the submit
button so Enter does nothing for empty/whitespace inputs.

Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

♻️ Duplicate comments (1)
src/components/ActionButtons.tsx (1)

225-231: ⚠️ Potential issue | 🟡 Minor

Guard Enter handling when query is empty.

The onKeyDown handler submits on Enter regardless of the disabled state, allowing empty or whitespace-only input to trigger "query submitted" tracking and navigation. The button prevents this via disabled={disabled}, but the keyboard path bypasses that guard.

Proposed fix
 function onKeyDown(e: KeyboardEvent<HTMLInputElement>) {
-  if (e.key === "Enter") {
-    e.preventDefault();
-    trackQuery();
-    router.push(href);
-  }
+  if (e.key !== "Enter" || disabled) return;
+  e.preventDefault();
+  trackQuery();
+  router.push(href);
 }
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/components/ActionButtons.tsx` around lines 225 - 231, The onKeyDown
handler for the input (function onKeyDown) calls trackQuery() and
router.push(href) on Enter even when the input is empty or whitespace; update
onKeyDown to first check the same guard used by the submit button (e.g., the
disabled boolean or that query.trim().length > 0) and only call
e.preventDefault(), trackQuery(), and router.push(href) when the input is not
disabled and the trimmed query is non-empty; reference the existing onKeyDown,
trackQuery, router.push, and the disabled/query state to implement the guard so
keyboard Enter and the button behave consistently.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Duplicate comments:
In `@src/components/ActionButtons.tsx`:
- Around line 225-231: The onKeyDown handler for the input (function onKeyDown)
calls trackQuery() and router.push(href) on Enter even when the input is empty
or whitespace; update onKeyDown to first check the same guard used by the submit
button (e.g., the disabled boolean or that query.trim().length > 0) and only
call e.preventDefault(), trackQuery(), and router.push(href) when the input is
not disabled and the trimmed query is non-empty; reference the existing
onKeyDown, trackQuery, router.push, and the disabled/query state to implement
the guard so keyboard Enter and the button behave consistently.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 37ffcf92-c7f2-4855-8502-82a51db811a3

📥 Commits

Reviewing files that changed from the base of the PR and between a0e9591 and 81e20dc.

📒 Files selected for processing (3)
  • src/app/DisplayEntities.tsx
  • src/components/ActionButtons.tsx
  • src/components/Breadcrumbs.tsx
✅ Files skipped from review due to trivial changes (1)
  • src/app/DisplayEntities.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • src/components/Breadcrumbs.tsx

@bklaing2 bklaing2 requested review from a team April 1, 2026 14:42
@bklaing2 bklaing2 merged commit 093d0f7 into main Apr 1, 2026
3 checks passed
@bklaing2 bklaing2 deleted the analytics branch April 1, 2026 14:44
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