Add engine-specific icons and improve table list in Play UI by alexey-milovidov · Pull Request #101134 · ClickHouse/ClickHouse

alexey-milovidov · 2026-03-29T22:39:40Z

Add inline SVG icons next to table names in the Play UI sidebar, reflecting the table engine:

MergeTree family: table grid icon
SummingMergeTree/AggregatingMergeTree: capital sigma (Σ)
Memory: microchip
View: eye
MaterializedView: eye over table lines
Merge: three overlaid tables
Distributed: fanout (box with arrows to three boxes)
Proxy: arrow between two boxes

Additional improvements:

Balloon only appears when hovering over the table name, not the entire row
Balloon has a 0.1s delay before showing to avoid flicker
Balloon background is changed
Database panel limited to 25em max width; long table names truncate with ellipsis
Tables starting with .inner are sorted last
Icons are 50% opaque

Changelog category (leave one):

Improvement

Changelog entry (a user-readable short description of the changes that goes into CHANGELOG.md):

Add engine-specific icons and improve table list UX in the Play UI sidebar.

Documentation entry for user-facing changes

Documentation is written (mandatory for new features)

…y UI Previously the balloon appeared when hovering anywhere on the row, including the empty space after the table name. Now it only appears when the pointer is over the table name button itself, using the CSS adjacent sibling combinator. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Each table in the sidebar now shows an SVG icon to the left of its name, reflecting the table engine: - MergeTree family: table grid icon - `SummingMergeTree`/`AggregatingMergeTree`: capital sigma (Σ) - `Memory`: microchip - `View`: eye - `MaterializedView`: eye over table lines - `Merge`: three overlaid tables - `Distributed`: fanout (box with arrows to three boxes) - `Proxy`: arrow between two boxes Replicated and Shared prefixes are stripped before matching. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

- Sigma: fix direction to match Σ (left-to-right-to-left zigzag) - Microchip: make body square (12x12 instead of 12x16) - Fanout: center source box vertically to make arrows symmetric - Merge: shadow tables offset to bottom-right instead of top-right Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

The front table with the header line is drawn last (on top) at the top-left, and the two shadow copies peek out behind it toward the bottom-right. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Each of the three layers is now a closed rectangle with a header line. The tables use background-color fill so the front table properly occludes the ones behind it, creating a clean stacked appearance. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

…ames Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

The block display made the button take full row width, pushing the absolutely-positioned balloon to the far right. With inline-block the button is only as wide as its text, so the balloon appears right after the table name. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Uses a CSS animation with a delay so the balloon does not flash when quickly moving the pointer across the table list. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

clickhouse-gh · 2026-03-29T22:40:22Z

Workflow [PR], commit [a675c79]

Summary: ❌

job_name	test_name	status	info
Integration tests (amd_llvm_coverage, 2/5)		failure
	test_overcommit_tracker/test.py::test_user_overcommit	FAIL	cidb
Stress test (arm_debug)		failure
	Logical error: Shard number is greater than shard count: shard_num=A shard_count=B cluster=C (STID: 5066-457d)	FAIL	cidb
Stress test (arm_msan)		failure
	MemorySanitizer: use-of-uninitialized-value (STID: 1003-358c)	FAIL	cidb, issue
Stress test (arm_ubsan)		failure
	Logical error: Shard number is greater than shard count: shard_num=A shard_count=B cluster=C (STID: 5066-457d)	FAIL	cidb

AI Review

Summary

This PR adds engine icons and table-list UX polish in play.html. I found one correctness issue: the new icon mapping for StorageProxy is unreachable because the code checks Proxy while system.tables.engine returns StorageProxy. That breaks the declared engine-specific icon behavior for proxy-backed tables.

Missing context

⚠️ No CI logs or browser compatibility matrix were provided for this UI change.

Findings

❌ Blockers

[programs/server/play.html:2224] getTableIcon checks if (e === 'Proxy'), but the engine exposed by StorageProxy::getName is StorageProxy. As a result, proxy-backed tables fall through to the default icon, so the new engine-specific mapping is incorrect.
- Suggested fix: match StorageProxy (or both aliases for safety), e.g. if (e === 'StorageProxy' || e === 'Proxy').

ClickHouse Rules

Item	Status	Notes
Deletion logging	➖
Serialization versioning	➖
Core-area scrutiny	➖
No test removal	✅
Experimental gate	➖
No magic constants	✅
Backward compatibility	✅
`SettingsChangesHistory.cpp`	➖
PR metadata quality	✅
Safe rollout	✅
Compilation time	✅

Final Verdict

Status: ⚠️ Request changes
Minimum required action: fix the StorageProxy icon condition in getTableIcon so proxy-backed tables receive the intended icon.

Replace display toggling and keyframe animation with opacity and pointer-events transitions. Both showing and hiding now have a 0.1s delay, preventing flicker when moving the pointer. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

clickhouse-gh · 2026-03-29T22:56:26Z

src/Storages/StorageProxy.h

    virtual StoragePtr getNested() const = 0;

-    String getName() const override { return "StorageProxy"; }
+    String getName() const override { return "Proxy"; }


StorageProxy::getName is used as the system.tables.engine value for table-function-backed tables, and changing it from StorageProxy to Proxy breaks existing behavior and tests.

Concrete evidence in this PR branch:

tests/queries/0_stateless/02888_system_tables_with_inaccessible_table_function.reference expects StorageProxy.

tests/queries/0_stateless/00076_system_columns_bytes.sql filters on engine = 'StorageProxy'.

This change will regress compatibility for users/scripts that rely on the current engine name. Please keep StorageProxy here, and if you need Play UI icon mapping, handle it purely in UI mapping logic.

…e_function` The test expected `StorageProxy` as the engine name, but the PR renamed it to `Proxy`. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

clickhouse-gh · 2026-03-30T01:55:21Z

LLVM Coverage Report

Metric	Baseline	Current	Δ
Lines	84.10%	84.20%	+0.10%
Functions	90.90%	90.90%	+0.00%
Branches	76.70%	76.70%	+0.00%

Changed lines: 66.67% (2/3) · Uncovered code

Full report · Diff report

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

…y-table-icons

…instead Address review feedback: keep `StorageProxy` as the engine name in `system.tables` to preserve backward compatibility. The Play UI icon mapping now matches on `StorageProxy` instead of `Proxy`. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

alexey-milovidov · 2026-03-30T19:19:49Z

programs/server/play.html

+    }
+
+    /// StorageProxy - arrow between two boxes
+    if (e === 'StorageProxy')


Just "Proxy", as we renamed it.

programs/server/play.html

alexey-milovidov

Perfect.

pamarcos · 2026-03-31T10:15:21Z

programs/server/play.html

+    }
+
+    /// StorageProxy - arrow between two boxes
+    if (e === 'Proxy')


I saw you reverted the rename from StorageProxy -> Proxy in 85c4338, so I don't understand why we're still looking for Proxy here instead of StorageProxy

Suggested change

if (e === 'Proxy')

if (e === 'StorageProxy')

No, it's not meant to be reverted. The name will be Proxy.

pamarcos

Before

After

alexey-milovidov and others added 16 commits March 29, 2026 23:12

Fix Merge icon: shadows now extend to bottom-right

8763b7b

The front table with the header line is drawn last (on top) at the top-left, and the two shadow copies peek out behind it toward the bottom-right. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Minor fix - StorageProxy should identify as Proxy

a234f32

Merge branch 'minor-storageproxy' into fix-play-table-icons

5c67a33

Use stroke-opacity instead of opacity for table icons

35930b0

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Limit database panel width to 25em and ellipsis-truncate long table n…

b5f92cf

…ames Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Sort tables starting with .inner. last in Play UI sidebar

cb256a8

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Fix .inner table sorting: match .inner prefix without trailing dot

26109a6

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Make table balloon background semi-transparent with backdrop blur

0a0e25b

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Make balloon arrow semi-transparent to match the balloon background

1206ca5

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Add 0.1s delay before showing the table balloon

2064e9e

Uses a CSS animation with a delay so the balloon does not flash when quickly moving the pointer across the table list. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Merge branch 'fix-play-table-balloon-hover' into fix-play-table-icons

415d18c

clickhouse-gh bot added the pr-improvement Pull request with some product improvements label Mar 29, 2026

clickhouse-gh bot reviewed Mar 29, 2026

View reviewed changes

Update test reference for `02888_system_tables_with_inaccessible_tabl…

c761595

…e_function` The test expected `StorageProxy` as the engine name, but the PR renamed it to `Proxy`. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

alexey-milovidov and others added 4 commits March 30, 2026 02:59

Update 00076_system_columns_bytes to use the new Proxy engine name

33c1971

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Merge remote-tracking branch 'origin/master' into minor-storageproxy

10b5605

Merge remote-tracking branch 'origin/minor-storageproxy' into fix-pla…

bb039d0

…y-table-icons

Merge remote-tracking branch 'origin/master' into fix-play-table-icons

34745c7

groeneai mentioned this pull request Mar 30, 2026

Fix parallel replicas crash with lazy remote source #101154

Open

alexey-milovidov and others added 3 commits March 30, 2026 08:02

Merge remote-tracking branch 'origin/master' into fix-play-table-icons

567c4cc

Merge remote-tracking branch 'origin/master' into fix-play-table-icons

c2555bb

alexey-milovidov added 3 commits March 30, 2026 10:52

Merge remote-tracking branch 'origin/master' into fix-play-table-icons

94b863c

Merge remote-tracking branch 'origin/master' into fix-play-table-icons

00e7481

Merge remote-tracking branch 'origin/master' into fix-play-table-icons

db74629

alexey-milovidov commented Mar 30, 2026

View reviewed changes

programs/server/play.html Outdated Show resolved Hide resolved

Apply suggestion from @alexey-milovidov

750b5a7

alexey-milovidov commented Mar 30, 2026

View reviewed changes

alexey-milovidov requested a review from pamarcos March 31, 2026 02:37

pamarcos self-assigned this Mar 31, 2026

Merge branch 'master' into fix-play-table-icons

a675c79

pamarcos reviewed Mar 31, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add engine-specific icons and improve table list in Play UI#101134

Add engine-specific icons and improve table list in Play UI#101134
alexey-milovidov wants to merge 30 commits intomasterfrom
fix-play-table-icons

alexey-milovidov commented Mar 29, 2026 •

edited

Loading

Uh oh!

clickhouse-gh bot commented Mar 29, 2026 •

edited

Loading

Uh oh!

clickhouse-gh bot Mar 29, 2026

Uh oh!

clickhouse-gh bot commented Mar 30, 2026

Uh oh!

alexey-milovidov Mar 30, 2026

Uh oh!

Uh oh!

alexey-milovidov left a comment

Uh oh!

pamarcos Mar 31, 2026

Uh oh!

pamarcos Mar 31, 2026

Uh oh!

alexey-milovidov Apr 1, 2026

Uh oh!

pamarcos left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

alexey-milovidov commented Mar 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog category (leave one):

Changelog entry (a user-readable short description of the changes that goes into CHANGELOG.md):

Documentation entry for user-facing changes

Uh oh!

clickhouse-gh bot commented Mar 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

AI Review

Summary

Missing context

Findings

ClickHouse Rules

Final Verdict

Uh oh!

clickhouse-gh bot Mar 29, 2026

Choose a reason for hiding this comment

Uh oh!

clickhouse-gh bot commented Mar 30, 2026

LLVM Coverage Report

Uh oh!

alexey-milovidov Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

alexey-milovidov left a comment

Choose a reason for hiding this comment

Uh oh!

pamarcos Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

pamarcos Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

alexey-milovidov Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

pamarcos left a comment

Choose a reason for hiding this comment

Before

After

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

alexey-milovidov commented Mar 29, 2026 •

edited

Loading

clickhouse-gh bot commented Mar 29, 2026 •

edited

Loading