web-client-ui
web-client-ui copied to clipboard
Picker + ListView - description column support
Deephaven UI spec defines support for a "description" column that can be used to add descriptions to items in collection components. This was investigated as part of #1890, and there are some challenges with Spectrum virtualization that will need to be figured out in order to support this.
Notes on what has been disovered so far
- Spectrum's virtualizer uses an estimated height for items that have not yet rendered. The estimated height is the height of an item without a description
- When scrolling windowed data, the virtualizer will render items within a certain viewport. In cases where items before the scroll position have not been rendered, their heights will be estimated and will be treated as though they have no descriptions. This makes it impossible for us to use the scroll position to determine the item indices that are in view since we don't have visibility into the virtualizer's internal state to know which items are estimated and which have rendered. We need these indices in order to load our table viewport so that data is visible.
- It is possible to identify the visible item indices by inspecting DOM and looking for
aria-rowindex, however, there is some lag in the rendering that has to be accounted for before querying which results in a sub-par UX. - Even if we do solve detecting the position, items can change height as they scroll into view and are rendered for the first time which also causes a poor UX.
- Picker is also impacted by this when detecting the initial scroll position (supporting descriptions in Picker seems generally to be low priority, so it may not be worth the effort to dig any further)
For reference, here's a map of item heights that result from items with descriptions in ListView:
export const LIST_VIEW_ROW_HEIGHTS_WITH_DESCRIPTIONS = {
compact: {
medium: 48,
large: 59,
},
regular: {
medium: 54,
large: 67,
},
spacious: {
medium: 56,
large: 69,
},
} as const;