Feat/add heatmap board component by sahil2448 · Pull Request #4726 · umami-software/umami

sahil2448 · 2026-11-01T18:24:17Z

Pull Request Description

Closes : #4719

Summary

Add a Heatmap board component so users can view click and scroll heatmaps directly on boards, including shared boards.

Problem

Boards currently have no component for click or scroll heatmaps. The only heatmap-like widget is WeeklyTraffic (traffic by day and hour). Users can only link to the Heatmaps tab in a TextBlock, which doesn't work on shared boards.

Solution

Added a new BoardHeatmap component (category: visualization, group: Traffic) with these options:

Type: click or scroll
Page path: the page to show the heatmap for
Screen width: All / Mobile / Tablet / Desktop

The component uses the board's date range and filters, renders the existing heatmap overlay, and is visible on shared boards.

Changes

File	Change
`src/app/(main)/boards/BoardHeatmap.tsx`	New component with click dot overlay and scroll bands
`src/app/(main)/boards/boardComponentRegistry.tsx`	Registered `BoardHeatmap` with config fields (mode, path, screen)
`src/lib/boardComponentCompatibility.ts`	Added `BoardHeatmap` as website-only component

Testing

Component follows existing board component patterns (matches WeeklyTraffic, WorldMap, etc.)
Uses existing useHeatmapQuery hook which respects board date range and filters
Compatible with website entity type boards
Visible on shared boards via standard API endpoints

Branch: feat/add-heatmap-board-component
Remote URL: https://github.com/sahil2448/umami/pull/new/feat/add-heatmap-board-component

^{Need help on this PR? Tag @codesmith-bot with what you need.}

- Add src/lib/like.ts with escapeLikeValue() and toLikePattern() helpers - getValues: escape search terms and wrap in %, add ESCAPE '\\' for PG - getGoal: translate every * to %, escape metacharacters, PG ESCAPE '\\' - getFunnel: escape step filter values, handle inner * wildcards, PG ESCAPE '\\' - Add/update tests for PG and ClickHouse alignment

Add a BoardHeatmap component that renders click or scroll heatmaps directly on boards, visible on shared boards. - Add BoardHeatmap component with click dot overlay and scroll bands - Register component in boardComponentRegistry with mode, path, screen config fields - Add BoardHeatmap to board component compatibility matrix for website entity type

vercel · 2026-11-01T18:24:22Z

@sahil2448 is attempting to deploy a commit to the Umami Software Team on Vercel.

A member of the Team first needs to authorize it.

greptile-apps · 2026-11-01T18:28:00Z

Confidence Score: 0/5

[Medium impact] The PR changes three bounded analytics workflows.

This PR needs fixes before merging because it cannot build and several heatmap flows do not work.

Findings

Search code cannot load ▶
Settings fail type checks ▶
Scroll bands use missing fields ▶
Empty results break hook order ▶
Shared boards cannot load heatmaps ▶
Screen setting changes nothing ▶
Missing searches crash value suggestions ▶
Path searches still use wildcards ▶
Click dots are shifted ▶
Heatmap lacks its page background ▶
Page query errors disappear ▶

Summary

Adds a website-only heatmap widget to boards, with click, scroll, page-path, and screen settings. Also changes SQL search escaping and adds online indicators to the realtime log.

Website boards show click or scroll heatmaps for a chosen page.
Realtime logs mark sessions active in the last five minutes.
Goal, funnel, and value searches match wildcards and literal symbols more clearly.

_{Reviews (1) · Last reviewed commit: "feat: add Heatmap component to Boards" · Reviewed by Greptile}

greptile-apps · 2026-11-01T18:28:04Z

+        name: 'path',
+        label: 'Page path',
+        type: 'text',
+        placeholder: '/path/to/page',


Settings fail type checks

placeholder is not declared in ConfigField. Since this entry is checked as part of ComponentDefinition[], TypeScript rejects it. Add the property to ConfigField and support it in the settings form, or remove it.

Suggested change

placeholder: '/path/to/page',

greptile-apps · 2026-11-01T18:28:04Z

+  } = useHeatmapQuery({
+    websiteId,
+    mode,
+  });


Shared boards cannot load heatmaps

useHeatmapQuery calls /websites/:websiteId/heatmaps, whose route requires canViewAuthenticatedWebsite. That helper rejects every request without auth.user, including valid board share tokens. Visitors opening a shared board therefore see an error instead of the heatmap. Add an appropriately scoped board-share path before advertising shared-board support.

Knowledge Base Used: Share/public access flow

greptile-apps · 2026-11-01T18:28:04Z

        .join(' OR ')})`;
    } else {
-      searchQuery = getSearchSQL(column);
+      searchQuery = \`${getSearchSQL(column)} escape '\\'\`;


Path searches still use wildcards

The literal-search fix misses fields stored in website_event. Their single-term query still binds the unescaped %${search}% value on line 85. Once the syntax errors are fixed, a path search containing _ or % still treats those characters as wildcards and can return unrelated values. Escape the value in both table branches and test both paths.

greptile-apps · 2026-11-01T18:28:04Z

+            {isScrollMode ? (
+              <ScrollBands
+                scroll={scroll}
+                pageW={detailData.scroll?.pageW ?? 0}
+                pageH={detailData.scroll?.pageH ?? 0}
+                viewportW={detailData.scroll?.viewportW ?? 0}
+                viewportH={detailData.scroll?.viewportH ?? 0}
+              />
+            ) : (
+              <ClickOverlay points={points} maxCount={maxCount} />


Heatmap lacks its page background

The widget never renders detailData.snapshot. It draws dots and scroll bands over an empty rectangle, so viewers cannot tell which page elements were clicked or reached. Render the returned page snapshot beneath the overlay, as the existing heatmap view does.

greptile-apps · 2026-11-01T18:28:04Z

+    <LoadingPanel
+      data={detailData}
+      isLoading={detailLoading}
+      error={error}


Page query errors disappear

The detail query's error is discarded. If the pages request succeeds but the selected-page request fails, LoadingPanel receives the pages query's error instead. With no detailData, the widget becomes blank rather than showing the failure. Capture the detail query's error and pass it to this panel.

Use a variable for the backslash character instead of inline escape '\\' inside template literals, which caused a parse error in the Vite/oxc transformer.

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

Replace template literals containing invalid escape sequences (backslash-backtick and backslash-quote) with string concatenation for the SQL ESCAPE clause. This fixes the oxc parser parse error that was blocking CI.

…s.ts - Replace invalid backslash-backtick template literal delimiters (` with backtick only) - Fix escape clause backslashes (4→2 in source) to match test expectations - Wrap decodeURIComponent in try-catch to handle invalid URI encoding (e.g. bare %) - Use decodedSearch variable consistently in multi-term search path

sahil2448 added 3 commits October 20, 2026 19:04

Add active user indicator to Realtime activity log

2b92e76

greptile-apps Bot reviewed Nov 1, 2026

View reviewed changes

sahil2448 and others added 6 commits November 1, 2026 18:28

fix: resolve invalid Unicode escape sequence in getValues.ts

7131194

Use a variable for the backslash character instead of inline escape '\\' inside template literals, which caused a parse error in the Vite/oxc transformer.

Update src/app/(main)/boards/BoardHeatmap.tsx

f989de0

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

Update src/app/(main)/boards/BoardHeatmap.tsx

78dfc28

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

Update src/queries/sql/getValues.ts

d2a8eef

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

fix: resolve Invalid Unicode escape sequence in getValues.ts

c02682f

Replace template literals containing invalid escape sequences (backslash-backtick and backslash-quote) with string concatenation for the SQL ESCAPE clause. This fixes the oxc parser parse error that was blocking CI.

Navigation Menu

Repository navigation

Feat/add heatmap board component - #4726

Feat/add heatmap board component#4726
sahil2448 wants to merge 9 commits into
umami-software:masterfrom
sahil2448:feat/add-heatmap-board-component

sahil2448 commented Nov 1, 2026 •

edited by blacksmith-sh Bot

Loading

Uh oh!

vercel Bot commented Nov 1, 2026

Uh oh!

greptile-apps Bot commented Nov 1, 2026 •

edited

Loading

Uh oh!

Uh oh!

greptile-apps Bot Nov 1, 2026

Uh oh!

Uh oh!

Uh oh!

greptile-apps Bot Nov 1, 2026

Uh oh!

Uh oh!

greptile-apps Bot Nov 1, 2026

Uh oh!

Uh oh!

greptile-apps Bot Nov 1, 2026

Uh oh!

greptile-apps Bot Nov 1, 2026

Uh oh!

This branch has not been deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

sahil2448 commented Nov 1, 2026 • edited by blacksmith-sh Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pull Request Description

Summary

Problem

Solution

Changes

Testing

Uh oh!

vercel Bot commented Nov 1, 2026

Uh oh!

greptile-apps Bot commented Nov 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Confidence Score: 0/5

Findings

Summary

Uh oh!

Uh oh!

greptile-apps Bot Nov 1, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

greptile-apps Bot Nov 1, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

greptile-apps Bot Nov 1, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

greptile-apps Bot Nov 1, 2026

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot Nov 1, 2026

Choose a reason for hiding this comment

Uh oh!

This branch has not been deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

sahil2448 commented Nov 1, 2026 •

edited by blacksmith-sh Bot

Loading

greptile-apps Bot commented Nov 1, 2026 •

edited

Loading