heatmap loading fix

[ragnep]

Summary by CodeRabbit

Release Notes

• New Features

  • Introduced an improved loading variant for the brain activity heatmap with viewport-aware rendering and dynamic alignment.
  • Enhanced the loading interface to display month labels that automatically adjust based on scroll position.

• Improvements

  • Refined the loading state visual layout with a grid-based approach for better alignment and smoother scrolling behavior.

[coderabbitai]

📝 Walkthrough

Walkthrough

The changes introduce a loading variant for the brain activity heatmap component featuring a viewport-backed grid layout with dynamic header alignment. New loading cell components and helper constants enable a 53-week scrollable heatmap surface during data loading, replacing the previous static structure with month-based header segment calculations.

Changes

Cohort / File(s)	Summary
Loading Component Enhancements components/user/brain/UserPageBrainActivityHeatmap.tsx	Adds UserPageBrainActivityHeatmapLoading export with viewport-backed loading layout. Introduces HeatmapLoadingCell (renders individual loading cells with conditional styling) and HeatmapLoadingMonthLabels (renders month segment headers based on scroll position). Implements useHeatmapViewport hook integration for dynamic header alignment during horizontal scrolling.
Loading Constants and Configuration components/user/brain/userPageBrainActivityHeatmap.helpers.ts	Removes HEATMAP_GRID_HEIGHT_PX constant. Adds LOADING_HEATMAP_WEEK_COUNT (53 weeks). Refactors LOADING_MONTH_HEADER_SEGMENTS from seasonal keys to month-specific keys (apr through mar) with explicit labelColumn and widthPx properties for computed header positioning.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Poem

🐰 A loading state so fine and bright,
With cells that grid in viewport's sight,
Month labels dance with scroll's delight,
Fifty-three weeks in loading's flight! ✨

🚥 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 'heatmap loading fix' is vague and generic, using non-descriptive phrasing that doesn't convey what specific aspect of the heatmap loading was fixed or improved.	Consider a more specific title that describes the actual change, such as 'Implement viewport-based loading layout for brain activity heatmap' or 'Refactor heatmap loading UI with dynamic month header alignment'.

✅ 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 (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch small-ui-fixes

📝 Coding Plan

• Generate coding plan for human review comments

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[coderabbitai]

🧹 Nitpick comments (1)

components/user/brain/UserPageBrainActivityHeatmap.tsx (1)

36-36: Consider reusing the stride calculation from helpers.

LOADING_COLUMN_STRIDE_PX duplicates the calculation for COLUMN_STRIDE_PX (line 32 in helpers). If this value needs updating in the future, both would need to change.

♻️ Optional: Export and reuse from helpers

In userPageBrainActivityHeatmap.helpers.ts:

-const COLUMN_STRIDE_PX = CELL_SIZE_PX + CELL_GAP_PX;
+export const COLUMN_STRIDE_PX = CELL_SIZE_PX + CELL_GAP_PX;

In UserPageBrainActivityHeatmap.tsx:

 import {
   CELL_GAP_PX,
   CELL_FRAME_STYLE,
   CELL_SIZE_PX,
+  COLUMN_STRIDE_PX,
   ...
 } from "./userPageBrainActivityHeatmap.helpers";

-const LOADING_COLUMN_STRIDE_PX = CELL_SIZE_PX + CELL_GAP_PX;

Then use COLUMN_STRIDE_PX directly.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@components/user/brain/UserPageBrainActivityHeatmap.tsx` at line 36,
LOADING_COLUMN_STRIDE_PX currently duplicates the stride calculation already
defined as COLUMN_STRIDE_PX in userPageBrainActivityHeatmap.helpers.ts; to fix,
export COLUMN_STRIDE_PX from userPageBrainActivityHeatmap.helpers.ts (if not
already exported) and in UserPageBrainActivityHeatmap.tsx remove the local
LOADING_COLUMN_STRIDE_PX constant and import and use COLUMN_STRIDE_PX instead
(reference symbols: LOADING_COLUMN_STRIDE_PX, COLUMN_STRIDE_PX,
userPageBrainActivityHeatmap.helpers.ts, UserPageBrainActivityHeatmap.tsx).

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@components/user/brain/UserPageBrainActivityHeatmap.tsx`:
- Line 36: LOADING_COLUMN_STRIDE_PX currently duplicates the stride calculation
already defined as COLUMN_STRIDE_PX in userPageBrainActivityHeatmap.helpers.ts;
to fix, export COLUMN_STRIDE_PX from userPageBrainActivityHeatmap.helpers.ts (if
not already exported) and in UserPageBrainActivityHeatmap.tsx remove the local
LOADING_COLUMN_STRIDE_PX constant and import and use COLUMN_STRIDE_PX instead
(reference symbols: LOADING_COLUMN_STRIDE_PX, COLUMN_STRIDE_PX,
userPageBrainActivityHeatmap.helpers.ts, UserPageBrainActivityHeatmap.tsx).

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 04dc9e96-b83c-4a64-9cc6-d1c9d2d30f11

📥 Commits

Reviewing files that changed from the base of the PR and between bc3cd32 and 1096c62.

📒 Files selected for processing (2)

• components/user/brain/UserPageBrainActivityHeatmap.tsx
• components/user/brain/userPageBrainActivityHeatmap.helpers.ts