feat: support wider tags in dimension/measure selectors and pivot tables#9614
Conversation
- Auto-fit tags column (capped) in the explore selector and pivot sidebar - Resizable tags column divider with persisted width on both surfaces - Resizable sidebar/table divider in the pivot view - Tooltip showing the full tag name when it is truncated Pivot sidebar keeps its legacy tag-aware initial width (240px without tags, 400px with tags) until the user drags the divider. Persist pivot sidebar width and tag column widths via the shared dashboard-layout-store (alongside the timeseries/TDD split sizes). Harden localStorageStore to degrade to in-memory only when storage is unavailable (e.g. sandboxed/partitioned embed iframes) instead of throwing on read/write.
AdityaHegde
left a comment
AdityaHegde
left a comment
There was a problem hiding this comment.
We are missing tooltips on dimension/measures. Also we should increase the minimums, lowest possible width barely shows anything,
| */ | ||
| export type OverflowCallback = (isOverflowing: boolean) => void; | ||
|
|
||
| export function detectOverflow(node: HTMLElement, callback: OverflowCallback) { |
There was a problem hiding this comment.
Maybe there is a way to do two way binding and avoid the callback. For svelte 5 we will have to have a class and add a memeber for $state to get shared.
There was a problem hiding this comment.
I kept the callback action. The class-with-$state pattern only works in runes-mode components, but here its used in PivotChip and DashboardMetricsDraggableList, which are still Svelte 4 — so a runes class can't serve them, and keeping to callback is the standard action contract. Maybe we can do it as part of future svelte.5 migration completion ?
There was a problem hiding this comment.
Ya we can do it as part of the migration
- Pivot chips show the display name (and description) and surface the tooltip on truncation even without a description. - Tag rows use the tooltip component instead of the native title attribute, disabled when the label is not clipped. - Raise the tag column minimum widths so a dragged-narrow column still shows a usable portion of the tag name.
2 participants
Adds resizable, content-aware tag columns to the dimension/measure selector (explore) and the pivot sidebar, so long tag names are readable instead of being clipped at a fixed width.
localStorage.detectOverflowaction shows a tooltip with the full tag name only when the label is actually truncated.localStorageStorenow guards reads and writes intry/catchso it degrades to in-memory state whenlocalStorageis unavailable (e.g. sandboxed/storage-partitioned embed iframes raisingSecurityError).Checklist:
Developed in collaboration with Claude Code